Creación de proyecto Standalone de Angular

En el siguiente post vamos a revisar los pasos necesarios para llevar a cabo la creación de un proyecto base Standalone de Angular. Se trata de un tema relevante ya que, a partir de la versión 17, en Angular se ha establecido que la creación por defecto de un proyecto se realice en modo Standalone, comenzando así a dejar un poco de lado los proyectos basados en Módulos, que quedarían reservados únicamente para las aplicaciones de mayor complejidad. No quiere esto decir que nos olvidemos de todo lo aprendido sobre módulos, pero sí que significa que debemos comenzar a prestarle más atención al enfoque standalone.

Por si no lo tenéis claro, os comentaré primero que Angular tenía dos formas principales de trabajar con proyectos web. El enfoque Modular consiste en dividir el proyecto en varios módulos, lo que permite establecer una separación funcional o técnica. Por contra, el enfoque Standalone permite tener toda la lógica en el mismo sitio, lo que simplifica al máximo la construcción del proyecto. En líneas generales, lo recomendable es utilizar el enfoque modular en aplicaciones complejas y el enfoque monolítico en las aplicaciones más sencillas. Si queréis más detalle sobre los dos tipos de enfoque, ya escribimos en su día un post detallado sobre ese tema.

Creación de proyecto Standalone de Angular

Dicho lo anterior, vamos a centrarnos ya en lo que sería la propia creación de un proyecto base Angular con estructura Standalone. Hay que puntualizar que la creación del proyecto la haremos con la Versión 17 de Angular, ten cuenta que lo más probable es que tú estés utilizando una versión posterior. En concreto, si lanzamos el comando "ng version", nos muestra esto.

ng version

⛔ Recordad que la creación de un proyecto se realiza por defecto en modo Standalone sólo a partir de la versión 17 de Angular. Como se aprecia, yo tengo instalada la versión 17.1.3, pero para la versión 16 (o versiones más antiguas) será necesario especificar el parámetro --standalone a la hora de crear el proyecto.

Los pasos necesarios para realizar la puesta en marcha de un nuevo proyecto base con esquema monolítico Standalone serían los siguientes:

 

1º) En primer, debemos situarnos en la carpeta de nuestro equipo en la que hayamos pensado almacenar el proyecto Angular que vamos a desarrollar en el futuro. Abrimos el terminal de comandos de dicha carpeta.

2º) A continuación, para realizar la creación propiamente dicha del proyecto Angular, tendremos que ejecutar el siguiente comando. En mi ejemplo, voy a crearme un proyecto denominado "front-universo-sta", pero tú puedes utilizar el nombre que más te guste...

ng new front-universo-sta

Y comenzará la instalación de los paquetes requeridos.

 

 

 

⛔ Recordad lo que hemos dicho más arriba. Si estáis utilizando la versión 16 (o anterior) de Angular, entonces el modo de creación por defecto será Modular. Si queréis crear un proyecto standalone en esas versiones más antiguas tendréis que utilizar el parámetro "--standalone". Sería algo así como:

ng new front-universo-sta --standalone

 

3º) Una vez concluida la creación del proyecto y la inicialización del repositorio Git, nos aparecerá un mensaje similar al siguiente;

"Succesfully initialized git"

4º) A continuación, nos vamos al IDE en el que vamos a implementar nuestro proyecto web. En mi caso, voy a desplegar Visual Studio Code.

5º) A continuación, seleccionamos la opción FILE - OPEN FOLDER y seleccionamos la carpeta en la que nos acabamos de crear el proyecto Angular. Se nos abrirá el proyecto base Angular dentro de una nueva perspectiva de Visual Studio Code.

 

 

6º) En la vista EXPLORER de la izquierda podemos ver la estructura recién creada del proyecto Angular, construcción realizada siguiendo el esquema Standalone.

 

Como vemos, en la carpeta raíz del proyecto "src/app" se han creado los siguientes objetos, que serán los mínimos requeridos para el esquema Standalone.

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.config.ts
• app.routes.ts

Configuración de extensiones

7º) Nos vamos al apartado EXTENSIONS y buscamos la extensión "Angular". Nos aparecerá una lista de opciones con ese contenido.

Nos vamos a centrar en las dos primeras extensiones:

• Angular Languages Service
• Angular Snippets

8º) Seleccionamos la extensión "Angular Snippets", lo que nos llevará a la ventana que nos mostrará las características de dicho plugin.

La activación de esta extensión nos va a facilitar la vida como programadores, ya que nos servirá para autocompletar las sentencias codificadas.  

 

9º) Pulsamos el botón INSTALL y comenzará la instalación de la extensión en nuestro Visual Studio Code. 

Si no nos da ningún problema, nos aparecerán los botones DISABLE y UNINSTALL. 

 

10º) A continuación, nos vamos a la extensión "Angular Language Service". Se nos desplegará la ventana con la información asociada a dicho plugin.

Esta extensión proporciona a los editores de código varias facilidades, como autocompletar código, mensajes de error, sugerencias y navegación dentro de las plantillas de Angular. 

 

11º) Pulsamos el botón INSTALL y comenzará la instalación de la extensión en nuestro Visual Studio Code. 

Al igual que en el caso anterior, si no nos da ningún problema, nos aparecerán los botones DISABLE y UNINSTALL.  

 

 

Arranque del servidor integrado de Angular

12º) Para arrancar el servidor integrado de Angular, nos dirigimos a la ventana TERMINAL de nuestro Visual Studio Code.

 

 

13º) A continuación, en la línea de comandos del terminal escribimos la instrucción de arranque del servidor integrado.

ng serve -o

Hecho esto, el servidor comenzará a arrancar. 

 

14º) Dará comienzo el arranque del servidor, junto con la compilación de nuestro proyecto Angular. Si todo va bien, nos aparecerá el siguiente resultado.

Application bundle generation complete. [1.276 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

 

15º) A continuación, se nos abrirá la ventana del servidor en nuestro navegador predeterminado. Si todo ha ido bien, debería aparecer un mensaje como este:

Hello, front-universo-sta

 

Por cierto, si ahora quisieras parar el servidor integrado de Angular, podrías hacerlo desde Visual Studio Code haciendo uso de la combinación de teclas siguiente:  

CONTROL + C

Y en principio, eso sería todo. Si has seguido correctamente los pasos anteriormente mencionados, ya tendrás preparado tu proyecto base Standalone de Angular. Como vemos, se trata de una tarea relativamente sencilla. En cualquier caso, cualquier duda que se te pase por la mente, puedes dejármela aquí abajo.

 

Saludos.