¿Cómo se implementan las aplicaciones angulares?

¿Cómo se implementan las aplicaciones angulares una vez que alcanzan la fase de producción?

Todas las guías que he visto hasta ahora (incluso en angular.io ) cuentan con un servidor Lite para servir y browserSync para reflejar los cambios, pero cuando termine con el desarrollo, ¿cómo puede publicar la aplicación?

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

En realidad, estás aquí tocando dos preguntas en una.

El primero es ¿Cómo alojar su aplicación? .
Y como @toskv mencionó, su pregunta realmente demasiado amplia para ser respondida y depende de muchas cosas diferentes.

El segundo es ¿Cómo prepara la versión de implementación de la aplicación? .
Tienes varias opciones aquí:

1. Implementar como es. Solo eso: sin minificación, concatenación, cambio de nombres, etc. Transpile todos sus proyectos ts copie todas sus dependencias js / css / ... sources + resultantes en el servidor de hosting y estará listo para comenzar.

2. Implemente utilizando herramientas de agrupación especiales, como webpacko systemjsgenerador.
   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 hace referencia en su HTML. systemjsBuilder incluso le permite deshacerse de la necesidad de incluirlo systemjscomo parte de su paquete de implementación.

3. Puede usar a ng deploypartir de Angular 8 para implementar su aplicación desde su CLI. ng deploydeberá usarse junto con su plataforma de 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 systemjsy agrupar 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 de la página, systemjsya que un cargador de módulos se encargará de eso.

Sé que suena confuso: para ayudarlo a comenzar con el # 2, aquí hay dos aplicaciones de muestra realmente buenas:

Constructor de SystemJS: semilla angular2

WebPack : iniciador angular2 webpack

Respuesta simple Utilice la CLI angular y emita el

ng build 

comando 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 construirá para la prueba, si tiene configuraciones de producción en su aplicación, debe usar

ng build --prod

Esto generará el proyecto en el distdirectorio y esto se puede enviar al servidor.

Mucho ha sucedido desde que publiqué esta respuesta. La CLI finalmente está en 1.0.0, así que siguiendo esta guía, actualice su proyecto antes de que intente compilar. https://github.com/angular/angular-cli/wiki/stories-rc-update

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

1. Cree una cuenta de Heroku e instale la CLI

2. Mover el angular-clidep a la dependenciesde package.json(por lo que se instala cuando se presiona a 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 Node que se creará en el siguiente paso. Esto colocará los archivos estáticos para la aplicación en un distdirectorio en el servidor e iniciará la aplicación después.

"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 eliminar la aplicación.

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

Aquí hay un resumen rápido que hice que tiene más detalles, incluido cómo forzar solicitudes para usar HTTPS y cómo manejar PathLocationStrategy:)

Yo uso con siempre :

1. Cree su aplicación angular con la carpeta angular-cli to distng build --prod --output-path ./dist

2. Cree el archivo server.js en su ruta de aplicación angular:

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/*', function(req,res) {
       res.sendFile(path.join(__dirname + '/dist/index.html'));
   });
   app.listen(80);

3. Empezar por siempre forever start server.js

¡Eso es todo! su aplicación debería estar ejecutándose!

Espero que esto pueda ayudar, y espero poder intentarlo durante la semana.

1. Crear aplicación web en Azure
2. Cree la aplicación Angular 2 en código vs.
3. Webpack para bundle.js.
4. Descargue el perfil xml publicado del sitio de Azure
5. Configure Azure-deploy usando https://www.npmjs.com/package/azure-deploy con el perfil del sitio.
6. Desplegar.
7. Prueba la crema.

Si prueba la aplicación como yo en localhost o tendrá algunos problemas con la página en blanco, uso esto:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

Explicación:

ng build

Crear una aplicación pero en el código hay muchos espacios, pestañas y otras cosas que hacen que el código pueda ser leído por humanos Para el servidor no es importante cómo se ve el código. Por eso uso:

ng build --prod --build-optimizer 

Esto hace que el código para producción y reduzca el tamaño [ --build-optimizer] permita reducir más código].

Así que al final agrego --base-href="http://127.0.0.1/my-app/"para mostrar la aplicación donde está 'marco principal' [en palabras simples]. Con él, puedes tener incluso múltiples aplicaciones angulares en cualquier carpeta.

Para implementar su aplicación Angular2 en un servidor de producción, en primer lugar, asegúrese de que su aplicación se ejecute localmente en su máquina.

La aplicación Angular2 también se puede implementar como una aplicación de nodo.

Entonces, cree un archivo de punto de entrada de nodo server.js / app.js (mi ejemplo usa express)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Agregue también express como dependencia en su archivo package.json.

Luego impleméntelo en su entorno preferido.

He creado un pequeño blog para su implementación en IIS. seguir enlace

Para implementar su aplicación en IIS, siga los pasos a continuación.

Paso 1: compila tu aplicación angular usando el comando ng build --prod

Paso 2: Después de compilar, todos los archivos se almacenan en la carpeta dist de la ruta de la aplicación.

Paso 3: Cree una carpeta en C: \ inetpub \ wwwroot por nombre QRCode .

Paso 4: copie el contenido de la carpeta dist en la carpeta C: \ inetpub \ wwwroot \ QRCode .

Paso 5: Abra el Administrador de IIS con el comando (Window + R) y escriba inetmgr, haga clic en Aceptar.

Paso 6: haga clic derecho en Sitio web predeterminado y haga clic en Agregar aplicación .

Paso 7: Ingrese el nombre de alias 'QRCode' y configure la ruta física a C: \ inetpub \ wwwroot \ QRCode .

Paso 8: Abra el archivo index.html y busque la línea href = "\" y elimine '\'.

Paso 9: ahora busque la aplicación en cualquier navegador.

También puede seguir el video para una mejor comprensión.

URL del video: https://youtu.be/F8EI-8XUNZc

Si implementa su aplicación en Apache (servidor Linux) para que pueda seguir los siguientes pasos: Siga los siguientes pasos :

Paso 1 : ng build --prod --env=prod

Paso 2 . (Copie dist en el servidor), luego cree la carpeta dist, copie la carpeta dist e impleméntela en el directorio raíz del servidor.

Paso 3 . Crea el .htaccessarchivo en la carpeta raíz y lo pega en el.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Obtiene el paquete de producción de carga más pequeño y rápido compilando con el compilador Ahead of Time, y agita / minimiza los árboles con un rollup como se muestra en el libro de cocina angular AOT aquí: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Esto también está disponible con Angular-CLI como se dijo en las respuestas anteriores, pero si no ha creado su aplicación utilizando la CLI, debe seguir el libro de cocina.

También tengo un ejemplo de trabajo con materiales y gráficos SVG (respaldado por Angular2) que incluye un paquete creado con el libro de cocina AOT. También encontrará todas las configuraciones y scripts necesarios para crear el paquete. Compruébalo aquí: https://github.com/fintechneo/angular2-templates/

Hice un video rápido que demuestra la diferencia entre el número de archivos y el tamaño de una compilación compilada de AoT frente a un entorno de desarrollo. Muestra el proyecto desde el repositorio de github arriba. Puedes verlo aquí: https://youtu.be/ZoZDCgQwnmQ

Despliegue angular 2 en páginas de Github

Prueba de implementación de Angular2 Webpack en ghpages

Primero obtenga todos los archivos relevantes de la distcarpeta de su aplicación, para mí fueron: + archivos css en la carpeta de activos + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Luego inserte estos archivos en el repositorio que ha creado.

1 - Si desea que la aplicación se ejecute en el directorio raíz, cree un repositorio especial con el nombre [yourgithubusername] .github.io e inserte estos archivos en la rama maestra

2 - Donde, como si quisiera crear estas páginas en el subdirectorio o en una rama diferente a la raíz, cree una rama gh-pages e inserte estos archivos en esa rama.

En ambos casos, la forma en que accedemos a estas páginas desplegadas será diferente.

Para el primer caso será https: // [yourgithubusername] .github.io y para el segundo caso será [yourgithubusername] .github.io / [Repo name] .

Si supone que desea implementarlo utilizando el segundo caso, asegúrese de cambiar la url base del archivo index.html en el dist, ya que todas las asignaciones de ruta dependen de la ruta que proporcione y debe establecerse en [/ branchname].

Enlace a esta página

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Para una forma rápida y económica de alojar una aplicación angular, he estado usando el alojamiento Firbase. Es gratis en el primer nivel y es muy fácil implementar nuevas versiones con Firebase CLI. Este artículo aquí explica los pasos necesarios para implementar su aplicación angular de producción 2 en Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

En resumen, ejecuta lo ng build --prodque crea una carpeta dist en el paquete y esa es la carpeta que se implementa en Firebase Hosting.

Implementar Angular 2 en azul es fácil

1. Ejecute ng build --prod , que generará una carpeta dist con todo incluido dentro de unos pocos archivos, incluido index.html.

2. Cree un grupo de recursos y una aplicación web dentro de él.

3. Coloque sus archivos de carpetas dist utilizando FTP. En azul buscará index.html para ejecutar la aplicación.

Eso es. Tu aplicación se está ejecutando!

A partir de 2017, la mejor manera es usar angular-cli (v1.4.4) para su proyecto angular.

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

No necesita agregar --aot explícitamente, ya que está activado de forma predeterminada con --prod. Y el uso de --output-hashing es según su preferencia personal con respecto a la explosión de caché.

Puede agregar explícitamente soporte CDN agregando:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

si planea usar CDN para hosting, lo cual es considerablemente rápido.

Con la CLI angular , puede usar el siguiente comando:

ng build --prod

Genera una carpeta dist con todo lo que necesita para implementar la aplicación.

Si no tiene práctica con servidores web, le recomiendo que use Angular to Cloud . Solo necesita comprimir la carpeta dist como archivo zip y subirla a la plataforma.

Diría que muchas personas con experiencia en la web antes de angular, están acostumbrados a desplegar sus artefactos web dentro de una guerra (es decir, jquery y html dentro de un proyecto Java / Spring). Terminé haciendo esto para solucionar el problema de CORS, después de intentar mantener mis proyectos angulares y REST separados.

Mi solución fue mover todos los contenidos angulares (4), generados con CLI, desde my-app a MyJavaApplication / angular. Luego modifiqué mi compilación Maven para usar maven-resources-plugin para mover el contenido de / angular / dist a la raíz de mi distribución (es decir, $ project.build.directory} / MyJavaApplication). Angular carga recursos desde la raíz de la guerra por defecto.

Cuando comencé a agregar enrutamiento a mi proyecto angular, modifiqué aún más la compilación maven para copiar index.html de / dist a WEB-INF / app. Y agregó un controlador Java que redirige todas las llamadas de descanso del lado del servidor al índice.

Simplemente siga el siguiente enlace,

Cambie las rutas del archivo de script de la página Index.html. Cambie la ruta del componente.html en caso de que obtenga un error que no pudo encontrar la ubicación

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy