En aquest tema, aprendrem com construir i desplegar una aplicació Angular. Aquest procés inclou la preparació de l'aplicació per a la producció, la configuració de l'entorn de desplegament i la publicació de l'aplicació en un servidor web.

• Entendre el procés de construcció d'una aplicació Angular.
• Aprendre a configurar l'entorn de producció.
• Desplegar l'aplicació en un servidor web.

1. Preparació de l'aplicació per a la producció
2. Construcció de l'aplicació
3. Configuració de l'entorn de producció
4. Desplegament en un servidor web
5. Exercicis pràctics
6. Resum

Abans de construir l'aplicació per a la producció, és important assegurar-se que l'aplicació està optimitzada i llesta per ser desplegada. Aquí hi ha alguns passos clau:

1. Optimització del codi: Assegura't que el codi està net i optimitzat. Elimina qualsevol codi innecessari o comentaris que no siguin necessaris.
2. Minificació i ofuscació: Angular proporciona eines per minificar i ofuscar el codi, reduint la mida dels fitxers i millorant el rendiment.
3. Configuració de l'entorn: Configura els fitxers d'entorn per a la producció, assegurant-te que les variables d'entorn estan correctament configurades.

Angular CLI proporciona una comanda per construir l'aplicació per a la producció. Aquesta comanda genera una versió optimitzada de l'aplicació que està llesta per ser desplegada.

• ng build: Comanda per construir l'aplicació.
• --prod: Indicador per construir l'aplicació en mode de producció.

Després d'executar la comanda, Angular generarà una carpeta dist/ que conté els fitxers optimitzats de l'aplicació. Aquesta carpeta és la que es desplegarà en el servidor web.

Angular permet configurar diferents entorns (per exemple, desenvolupament, producció) utilitzant fitxers d'entorn. Aquests fitxers es troben a la carpeta src/environments/.

Assegura't que el fitxer d'entorn de producció està configurat correctament en angular.json:

Un cop l'aplicació està construïda, el següent pas és desplegar-la en un servidor web. Hi ha diverses opcions per desplegar una aplicació Angular, com ara utilitzar serveis de hosting com Firebase, Netlify, o un servidor web tradicional com Apache o Nginx.

1. Instal·lar Firebase CLI:

2. Iniciar sessió a Firebase:

3. Inicialitzar el projecte Firebase:

4. Desplegar l'aplicació:

1. Crear un compte a Netlify.
2. Connectar el repositori de GitHub.
3. Configurar els paràmetres de construcció:
   • Build command: ng build --prod
   • Publish directory: dist/your-app-name
4. Desplegar l'aplicació.

1. Construir l'aplicació:

2. Copiar els fitxers de la carpeta dist/ al directori del servidor web.
3. Configurar el servidor web per servir l'aplicació Angular.

Exemple de configuració per a Nginx

1. Construir l'aplicació per a la producció:

   • Executa la comanda ng build --prod i revisa els fitxers generats a la carpeta dist/.

2. Configurar l'entorn de producció:

   • Modifica el fitxer environment.prod.ts per incloure una variable d'entorn personalitzada i assegura't que està configurada correctament en angular.json.

3. Desplegar l'aplicació en Firebase:

   • Segueix els passos per desplegar l'aplicació en Firebase i comprova que l'aplicació està accessible en línia.

En aquest tema, hem après com preparar, construir i desplegar una aplicació Angular per a la producció. Hem vist com optimitzar el codi, configurar l'entorn de producció, construir l'aplicació utilitzant Angular CLI i desplegar-la en diferents plataformes de hosting. Amb aquests coneixements, estàs preparat per publicar les teves aplicacions Angular i fer-les accessibles al públic.