typescript - change - page title angular 4

¿Cómo se implementan las aplicaciones angulares?

Question

¿Cómo se implementan las aplicaciones de Angular 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 archivos .js compilados en la página index.html o los minimizo usando gulp? ¿Trabajarán ellos? ¿Necesito SystemJS en absoluto en la versión de producción?

Answer 1

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 --aot explícitamente, ya que está activado de manera 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.

Answer 2

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

Answer 3

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

1. Cree una cuenta de Heroku e instale la CLI

2. Mueva el angular-cli dep a las dependencies en package.json (para que se instale cuando presiona a Heroku.

3. Agregue un script postinstall a la postinstall que ejecutará ng build cuando 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 directorio dist 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 una writeup rápida que hice que tiene más detalles, incluyendo cómo forzar solicitudes para usar HTTPS y cómo manejar PathLocationStrategy :)

Answer 4

De hecho, estás aquí tocando dos preguntas en una. El primero es cómo alojar su aplicación. Y como @toskv mencionó, es una pregunta realmente demasiado amplia para ser respondida y depende de muchas cosas diferentes. El segundo es más específico: ¿cómo se 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 nombre, etc. Transpile todos sus proyectos ts, copie todas sus fuentes js / css / ... sources + dependencias resultantes en el servidor de alojamiento y listo.
2. 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 hace referencia en su html. El generador de Systemjs incluso le permite deshacerse de la necesidad de incluir systemjs como parte de su paquete de implementación.

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 de la página; systemjs como 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 SystemJS: semilla angular2

WebPack : iniciador de webpack angular2

Mira cómo lo hacen, y con suerte esto te ayudará a encontrar la forma de agrupar las aplicaciones que haces.

Answer 5

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 carpeta dist 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

Answer 6

Diría que muchas personas con experiencia en la web antes de angular, están acostumbradas 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.

Answer 7

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.

Answer 8

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!

Answer 9

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 el árbol 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 con 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

Answer 10

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 link

Answer 11

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 2 de producción 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.

Answer 12

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 directorio dist y esto se puede enviar al servidor.

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

Answer 13

Si implementa su aplicación en Apache (servidor Linux) para poder 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 archivo .htaccess en la carpeta raíz y lo pega en el archivo .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>

Answer 14

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

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 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.

Answer 15

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

Answer 16

Yo uso con forever :

1. Cree su aplicación Angular con angular-cli para la carpeta dist ng 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. Comience para forever start server.js

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

Answer 17

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 (Ventana + 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