¿Cómo implementa aplicaciones Angular una vez que llegan a la fase de producción?
Todas las guías que he visto hasta ahora (incluso en angular.io ) cuentan con un servidor ligero para servir y browserSync para reflejar los cambios, pero cuando termina con el desarrollo, ¿cómo puede publicar la aplicación?
¿Importo todos los archivos .js compilados en la página index.html o los minifico usando trago? ¿Funcionarán? ¿Necesito SystemJS en absoluto en la versión de producción?
Respuesta sencilla. Utilice la CLI de Angular y emita el
ng buildcomando en el directorio raíz de su proyecto. El sitio se creará en el directorio dist y puede implementarlo en cualquier servidor web.
Esto se compilará para la prueba, si tiene configuraciones de producción en su aplicación, debe usar
ng build --configuration production Esto compilará el proyecto en el directorio dist y se puede enviar al servidor.
Han pasado muchas cosas desde que publiqué esta respuesta por primera vez. La CLI finalmente está en 1.0.0, así que siguiendo esta guía, actualice su proyecto antes de intentar compilarlo. https://github.com/angular/angular-cli/wiki/stories-rc-update
En realidad estás aquí tocando dos preguntas en una.
El primero es ¿Cómo alojar su aplicación? .
Y como @toskv mencionó, es una pregunta demasiado amplia para ser respondida y depende de muchas cosas diferentes.
El segundo es ¿Cómo se prepara la versión de implementación de la aplicación? .
Aquí tienes varias opciones:
Implemente utilizando herramientas de agrupación especiales, como webpack o systemjs builder.
Vienen con todas las posibilidades que faltan en el #1.
Puede empaquetar todo el código de su aplicación en solo un par de archivos js/css/... a los que haga referencia en su HTML. systemjs builder incluso le permite deshacerse de la necesidad de incluir systemjs como parte de su paquete de implementación.
Puede usar ng deploy a partir de Angular 8 para implementar su aplicación desde su CLI. ng deploy deberá usarse junto con la plataforma de su elección (como @angular/fire ). Puede consultar los documentos oficiales para ver qué funciona mejor para usted aquí
Sí, lo más probable es que necesite implementar systemjs y muchas otras bibliotecas externas como parte de su paquete. Y sí, podrá agruparlos en solo un par de archivos js a los que hace referencia desde su página HTML.
Sin embargo, no tiene que hacer referencia a todos sus archivos js compilados desde la página; systemjs como cargador de módulos se encargará de eso.
Sé que suena confuso: para ayudarlo a comenzar con el n. ° 2, aquí hay dos aplicaciones de muestra realmente buenas:
Constructor SystemJS: semilla angular2
Paquete web: iniciador de paquete web angular2
Con Angular CLI es fácil. Un ejemplo para Heroku:
Cree una cuenta de Heroku e instale la CLI
Mueva angular-cli dep a las dependencies en package.json (para que se instale cuando presione Heroku.
Agregue un script postinstall a la instalación que ejecutará ng build cuando el código se envíe a Heroku. Agregue también un comando de inicio para un servidor de nodo que se creará en el siguiente paso. Esto colocará los archivos estáticos de la aplicación en un directorio dist en el servidor y luego iniciará la aplicación.
"scripts": { // ... "start": "node server.js", "postinstall": "ng build --aot -prod" } // server.js const express = require('express'); const app = express(); // Run the app by serving the static files // in the dist directory app.use(express.static(__dirname + '/dist')); // Start the app by listening on the default // Heroku port app.listen(process.env.PORT || 8080); heroku create git add . git commit -m "first deploy" git push heroku master Aquí hay una redacción rápida que hice que tiene más detalles, que incluye cómo forzar las solicitudes para usar HTTPS y cómo manejar PathLocationStrategy :)