¿Cómo se implementan las aplicaciones de Angular?

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

ng build --prod

Esto construirá el proyecto en el directorio dist y esto se puede enviar al servidor.

Mucho ha sucedido desde que publiqué por primera vez esta respuesta. El CLI es finalmente en una 1.0.0 así que siguiendo esta guía ir actualizar su proyecto debe suceder antes de intentar construir. https://github.com/angular/angular-cli/wiki/stories-rc-update

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

1. Crea una cuenta Heroku e instala la CLI

2. Mueve el angular-cli dep al dependencies en package.json (para que se instale cuando envíes a Heroku.

3. Agregue un script postinstall que se ejecutará ng build cuando el código se envíe a Heroku. También agregue un comando start para un servidor de nodos que se creará en el siguiente paso. Esto colocará los archivos estáticos para la aplicación en un dist directorio en el servidor e inicie la aplicación después.

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

1. 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);

1. Cree un control remoto Heroku y presione para depoy 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, incluyendo cómo forzar las solicitudes para usar HTTPS y cómo manejar PathLocationStrategy :)

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

1. Crear aplicación web en Azure
2. Crear Angular 2 aplicación en vs código.
3. Webpack para agrupar.js.
4. Descargar Azure site perfil publicado xml
5. Configurar Azure-deploy usando https://www.npmjs.com/package/azure-deploy con el perfil del sitio.
6. Despliegue.
7. Pruebe la crema.

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.

Por lo tanto, cree un servidor de archivos de punto de entrada de nodo.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'));
});

También agregue express como una dependencia en su paquete.archivo json.

Luego despliégalo en tu entorno preferido.

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

Obtienes el paquete de producción de carga más pequeño y rápido compilando con el compilador Ahead of Time,y tree-shake / minify con 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 respuestas anteriores, pero si no ha hecho 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á toda la configuración y los scripts necesarios para crear el paquete. Échale un vistazo 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 AoT vs un entorno de desarrollo. Muestra el proyecto del repositorio de github anterior. Puedes verlo aquí: https://youtu.be/ZoZDCgQwnmQ

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

Paso 1: Compila tu aplicación Angular usando command ng build pro 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: Crea una carpeta en C:\inetpub\wwwroot por nombre QRCode.

Paso 4: Copie el contenido de la carpeta dist a C:\inetpub\wwwroot\QRCode carpeta.

Paso 5: Abra el administrador de IIS usando command (Window + R) and type inetmgr click OK.

Paso 6: Haga clic derecho en el Sitio Web predeterminado y haga clic en Agregar aplicación.

Paso 7: Introduzca el nombre del alias 'QRCode' y establezca la ruta física en C:\inetpub\wwwroot\QRCode .

Paso 8: Abrir índice.html archivo y encontrar la línea href="\" y eliminar '\'.

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

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

Url del vídeo: https://youtu.be/F8EI-8XUNZc

Implementar Angular 2 en azure es fácil

1. Ejecute ng build pro 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 usando FTP. En azure buscará index.html para ejecutar la aplicación.

Eso es todo. Su aplicación se está ejecutando !

Con Angular CLI , 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 usar Angular to Cloud. Solo necesita comprimir la carpeta dist como archivo zip y subirla a la plataforma.

Despliegue de Angular 2 en páginas de Github

Probando el despliegue de Angular2 Webpack en ghpages

Primero obtenga todos los archivos relevantes de la carpeta dist de su aplicación, para mí fue el : + archivos css en la carpeta assets + principal.paquete.js + polyfills.paquete.js + proveedor.paquete.js

Luego empuje estos archivos en el repositorio que ha creado.

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

2 Where Donde si desea crear estas páginas en el subdirectorio o en una rama diferente a la raíz, cree una rama gh-pages y empuje 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 se será [yourgithubusername]. github.io/[Nombre del repositorio] .

Si supongamos que desea implementarlo utilizando el segundo caso, asegúrese de cambiar la url base del índice.archivo html en la dist, ya que todas las asignaciones de ruta dependen de la ruta que se le dé y debe establecerse en [/branchname].

Enlace a esta página

Https://rahulrsingh09.github.io/Deployment

Repositorio de Git

Https://github.com/rahulrsingh09/Deployment

Uso con para siempre :

1. Construya su aplicación Angular con angular-cli a la carpeta dist ng build --prod --output-path ./dist

2. Crear servidor.archivo js en la ruta de acceso de la 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. Empieza para siempre forever start server.js

Eso es todo! su aplicación debe estar en ejecución!

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

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

Explicación:

ng build

Construir aplicación, pero hay muchos espacios, pestañas y otras cosas. 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 salga para la producción y reduce el tamaño [--build-optimizer] permite 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á 'main frame' [en simple palabra]. Con él puede tener incluso varias aplicaciones angulares en cualquier carpeta.

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

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

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 es necesario agregar explicitly aot explícitamente ya que está activado por defecto con --prod.Y el uso de output output-hashing es según sus preferencias personales con respecto a la explosión de caché.

Podría agregar explícitamente soporte de CDN agregando:

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

Si planea usar CDN para el alojamiento, que es considerablemente rápido.

Yo diría que muchas personas con experiencia 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 evitar el problema de CORS, después de intentar mantener mis proyectos angular y REST separados.

Mi solución fue mover todos los contenidos de angular (4), generados con CLI, de my-app a MyJavaApplication/angular. Entonces puedo modificar mi Maven build usar maven-recursos-plugin para mover el contenido de / angular / dist a la raíz de mi distribución (es decir $project.construir.directory} / MyJavaApplication). Angular carga recursos desde la raíz de la guerra de forma predeterminada.

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

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 . (Copia dist en el servidor) a continuación, dist carpeta creada, copia dist carpeta e implementarlo en el directorio raíz del servidor.

Paso 3 . Crea el archivo .htaccess en la carpeta raíz y pégalo 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>

Simplemente siga el siguiente enlace,

Cambie su Índice.rutas de archivo de script de página html Cambia tu componente.ruta html en caso de que su error de obtención que no pudo encontrar la ubicación

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