navigationend - Angular 2 con CLI-construir para producción
router events subscribe angular 4 (9)
Acabo de instalar angular-cli 1.0.0.beta.17 (el más reciente), comenzar un nuevo proyecto, poder servir el proyecto en el puerto 4200 sin problemas, ¡solo la "aplicación estándar" funciona! mensaje.
Sin embargo, cuando intento compilar para la producción esta aplicación vacía y genérica mediante el comando ng build --prod no tengo ningún archivo principal. *. Js creado en absoluto y tengo algunas pantallas de advertencias como:
- Bajando la función no utilizada ...
- Efectos del sitio en la inicialización ...
- etc
Este es un nuevo proyecto vacío. Todavía no tuve la oportunidad de romper nada ...
¿Cómo construir la versión de producción?
Con la versión cli (1.0.1) usa:
ng build --prod
Esto le dará la carpeta dist con el index.html y todo el archivo js incluido listo para la producción.
Debe actualizar la última versión angular-cli, mecanografiado. Si usas el comando:
ng build --prod --aot=false
Su proyecto compila la compilación JIT y debe funcionar si utiliza angular-cli.
si quieres construir con comando
ng build --prod --aot=true
entonces será una compilación AOT y deberá actualizar el archivo main.ts en:
import { enableProdMode } from ''@angular/core'';
import { platformBrowser } from ''@angular/platform-browser'';
import { AppModule } from ''./app/app.module'';
import { environment } from ''./environments/environment'';
if (environment.production) {
enableProdMode();
}
platformBrowser().bootstrapModuleFactory(AppModule);
Desea el AOT, que está implícito por el uso del -prod . Desafortunadamente, cuando Angular CLI se rompe, los mensajes de error no son útiles. Así lo resolví:
npm install [email protected]
Encontré la solución hace mucho, mucho camino en esta página: https://github.com/angular/angular-cli/issues/7113
He visto alguna mención de que actualizar la versión de Angular CLI a al menos 1.2.6. soluciona el problema también, pero no lo ha probado todavía.
Estas son las advertencias de uglify js, ya sea de su código fuente de java-script o de las bibliotecas de terceros que está utilizando en su proyecto. Por ahora, puede ignorarlas.
El equipo de Angular Cli está trabajando en suprimir esto para la compilación de producto https://github.com/angular/angular-cli/pull/1609
Hay muchos comandos para construir la aplicación angular al modo de producción usando cli angular.
ng build --env = prod
Una vez que ejecute este comando en cmd dist, se creará una carpeta predeterminada que contendrá todos los archivos minificados relacionados con la compilación prod, pero no establecerá la ruta base en el index.html. Para cambiar en index.html, vaya y haga el cambio manual como agregar el (.) Ie.
<base href="./">
También puede pasar el parámetro mientras construye el código en modo prod mediante el comando angular / CLI.
ng build --base-href=./ --env=prod
También hay otros comandos para compilar, como pasar el AOT y el optimizador de compilación (para reducir el tamaño de los paquetes).
ng build --prod --build-optimizer
Si desea cambiar el nombre de la carpeta predeterminada (dist) después de la compilación, puede cambiar el valor de outDir en .angular-cli.json.
Intente usar: ng build --target = production Esto debería funcionar.
Según la wiki de github de Angular-cli, estas son las formas más comunes de iniciar un desarrollo y desarrollo de producción.
# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build
Hay diferentes banderas predeterminadas que afectarán a las compilaciones dedev vs --prod.
Flag --dev --prod
--aot false true
--environment dev prod
--output-hashing media all
--sourcemaps true false
--extract-css false true
--prod también establece los siguientes ajustes no identificables:
- Agrega un trabajador de servicio si está configurado en
.angular-cli.json. - Reemplaza
process.env.NODE_ENVen módulos con el valor deproduction(esto es necesario para algunas bibliotecas, como reaccionar). - Ejecuta UglifyJS en el código.
Necesito resolver algunos problemas para que AOT funcione. Cuando corri
ng build --prod --aot = false
Yo obtendré un error similar a
Module not found: Error: Can''t resolve ''./$$_gendir/app/app.module.ngfactory''
Originalmente, tuve que hacer un proyecto de refactorización para que AOT funcionara. Sin embargo, pueden ser una solución si se encuentra con este error. Tratar
npm i [email protected]
Si Aot está o no está implementado.
Si Aot es implementado:
ng build --prod
Si Aot no está implementado:
ng build --prod --aot=false
prueba esto
ng build --env=prod
El sistema de compilación toma como valor predeterminado el entorno dev que utiliza environment.ts , pero si realiza ng build --env=prod , se utilizará environment.prod.ts su lugar.
Resultado de la muestra si su proyecto es nueva aplicación angular de cli.
10% building mod3439ms building modules 1ms add01564ms 917ms asset45ms emittingHash: 9216e76d6f10637c945c
Version: webpack 2.1.0-beta.22
Time: 6358ms
Asset Size Chunks Chunk Names
main.bundle.js 2.6 MB 0, 2 [emitted] main
styles.bundle.js 10.2 kB 1, 2 [emitted] styles
inline.js 5.53 kB 2 [emitted] inline
main.map 2.61 MB 0, 2 [emitted] main
styles.map 14.2 kB 1, 2 [emitted] styles
inline.map 5.59 kB 2 [emitted] inline
index.html 482 bytes [emitted]
assets/.npmignore 0 bytes [emitted]
chunk {0} main.bundle.js, main.map (main) 2.06 MB {1} [initial] [rendered]
chunk {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 2.82 kB 0
chunk {0} index.html 350 bytes [entry] [rendered]
Hecho y está bajo / dist a menos que haya cambiado outDir en angular-cli.json