typescript - Angular 2/4/5 - Kompilering i förväg hur man

Jag försöker starta min Angular 2 RC5-applikation enligt denna guide https://angular.io/docs/ts/latest/guide/ngmodule.html Nedan är min kod

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Men när jag försökte kompilera TypeScript-kod fick jag följande fel

app\main.ts(1,36): fel TS2307: Kan inte hitta modulen './app.module.ngfactory'.

Hur kan jag generera filen app.module.ngfactory? Vilket verktyg ska jag använda?

Svar #1

Både JIT- och AOT-kompilatorerna genererar en AppModuleNgFactory-klass från samma AppModule-källkod.

JIT-kompilatorn skapar den fabriksklassen i farten, i minnet, i webbläsaren. AOT-kompilatorn skriver ut fabriken till en fysisk fil som vi importerar här i den statiska versionen av main.ts

På en övergripande nivå tillhandahåller @angular/compiler-cli ett omslag runt Typescripts tsc-kompilator, och både AoT kompilera din applikations kod, och sedan transpilera din applikations Typescript till Javascript:

ngc -p src

Detta genererar en ny fil för varje komponent och modul (kallad en NgFactory)

För att köra din app i AoT-läge, allt som krävs är att ändra din main.ts-fil från

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

till

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

REDIGERA:

För att använda ngc-kommandot, installera först dessa-

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

ngc är en drop-in ersättning för tsc som du hittar i mappen ./node_modules/.bin/ngc.

Svar #2

2017 UPPDATERING

Från och med januari 2017 Om du använder angular-cli, är AOT-kompilering nu standardmetoden för kompilering när följande kommando körs ng build --prod utan krav på kodändringar.

Om du vill inaktivera AOT och istället använda JIT i produktion, kan du använda ng build --prod --no-aot.

Källa: https://github.com/angular/angular-cli/issues/4138

Detta innebär att du fortfarande kan använda JIT-kompilering medan du utvecklar (kommer att kompilera snabbare så ganska praktiskt) med ng build och lämna dina .ts som något i stil med detta:

// 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);

Sammanfattningsvis:

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

Relaterade artiklar