navigationend - Angular 2/4/5-Compilación anticipada de cómo

router angular navigationend

Question

Intento arrancar mi aplicación Angular 2 RC5 siguiendo esta guía https://angular.io/docs/ts/latest/guide/ngmodule.html A continuación está mi código

import { AppModuleNgFactory } from ''./app.module.ngfactory'';
import {platformBrowser} from "@angular/platform-browser";

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Sin embargo, cuando traté de compilar el código de mecanografía, recibí el siguiente error

app / main.ts (1,36): error TS2307: No se puede encontrar el módulo ''./app.module.ngfactory''.

¿Cómo puedo generar el archivo app.module.ngfactory ? ¿Qué herramienta debo usar?

Answer 1

Los compiladores JIT y AOT generan una clase AppModuleNgFactory a partir del mismo código fuente de AppModule.

El compilador JIT crea esa clase de fábrica sobre la marcha, en la memoria, en el navegador. El compilador AOT envía la fábrica a un archivo físico que estamos importando aquí en la versión estática de main.ts

En un nivel alto, @angular/compiler-cli proporciona una envoltura alrededor del compilador tsc Typescript, y tanto AoT compila el código de su aplicación, y luego transcribe su Typescript a Javascript:

$ ngc -p src

Esto genera un nuevo archivo para cada componente y módulo (llamado NgFactory )

Para ejecutar su aplicación en modo AoT , todo lo que se requiere es cambiar su archivo main.ts de

import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’
import {MyAppModule} from ‘./app’
platformBrowserDynamic().bootstrapModule(MyAppModule);

a

import {platformBrowser} from ‘@angular/platform-browser’
import {MyAppModuleNgFactory} from ‘./app.ngfactory’ //generated code
platformBrowser().bootstrapModuleFactory(MyAppModuleNgFactory);

EDITAR:

Para usar el comando ngc , primero instala estos-

$ npm install @angular/compiler-cli typescript@next @angular/platform-server @angular/compiler

ngc es un reemplazo ngc para tsc que lo encontrará en la carpeta ./node_modules/.bin/ngc .

Answer 2

ACTUALIZACIÓN 2017

A partir de Janurary 2017 Si se usa angular-cli , la compilación AOT es ahora el método de compilación predeterminado cuando se ejecuta el siguiente comando ng build --prod sin requisitos de cambio de código.

Si desea deshabilitar AOT y en su lugar usar JIT en producción, entonces puede usar ng build --prod --no-aot .

Fuente: https://github.com/angular/angular-cli/issues/4138

Esto significa que todavía puedes usar la compilación JIT mientras desarrollas (compilará más rápido y será muy útil) con ng build y dejas tus .ts como algo como esto:

// The browser platform with a compiler import { platformBrowserDynamic } from ''@angular/platform-browser-dynamic''; // The app module import { AppModule } from ''./app/app.module''; // Compile and launch the module platformBrowserDynamic().bootstrapModule(AppModule); Resumir:

ng build                    // build with JIT
ng build --prod --no-aot    // build with JIT 
ng build --prod             // build with AOT