¿Cómo se implementan aplicaciones Angular?

¿Cómo se implementan las 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 termines con el desarrollo, ¿cómo puedes publicar la aplicación?

¿Importo todos los .jsarchivos compilados en la index.htmlpágina o los minimizo usando gulp? ¿Funcionarán? ¿Necesito SystemJS en la versión de producción?

Feb 22 '16 00:02 Joseph Girgis

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? .
Tienes varias opciones aquí:

1. Implementar como está. Solo eso: sin minificación, concatenación, alteración de nombres, etc. Transpile todo su proyecto ts, copie todas las fuentes js/css/... + dependencias resultantes al servidor de alojamiento y estará listo.

2. Implemente utilizando herramientas de agrupación especiales, como webpacko systemjsconstructor.
   Vienen con todas las posibilidades que faltan en el n.º 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. systemjsBuilder incluso le permite deshacerse de la necesidad de incluirlo systemjscomo parte de su paquete de implementación.

3. Puede utilizar ng deploya partir de Angular 8 para implementar su aplicación desde su CLI. ng deploydeberá 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 necesites implementar systemjsun montón de otras bibliotecas externas como parte de tu paquete. Y sí, podrá agruparlos en solo un par de archivos js a los que haga referencia desde su página HTML.

Sin embargo, no es necesario que haga referencia a todos los archivos js compilados desde la página, systemjsya que un cargador de módulos se encargará de eso.

Sé que suena confuso; para ayudarle a comenzar con el número 2, aquí hay dos aplicaciones de muestra realmente buenas:

Constructor SystemJS: semilla angular2

WebPack: iniciador del paquete web angular2

Feb 22 '2016 20:02 Amid

Con Angular CLI es fácil. Un ejemplo para Heroku:

1. Cree una cuenta Heroku e instale la CLI

2. Mueva el angular-clidepartamento hacia dependenciesadentro package.json(para que se instale cuando presione Heroku.

3. Agregue un postinstallscript que se ejecutará ng buildcuando 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 distdirectorio en el servidor y luego iniciará la aplicación.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. Cree un servidor Express para servir la aplicación.

// 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);

5. Cree un control remoto Heroku y presione para implementar la aplicación.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

Aquí hay un artículo rápido que hice que tiene más detalles, incluido cómo forzar el uso de HTTPS en las solicitudes y cómo manejarlas PathLocationStrategy:)

Dec 15 '2016 19:12 cienki