Angular 2 / 4 / 5 - Compilation à l'avance comment faire

Question

J'essaye d'amorcer mon application Angular 2 RC5 en suivant ce guide https://angular.io/docs/ts/latest/guide/ngmodule.html Voici mon code

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Cependant, lorsque j'ai essayé de compiler le code typecript, j'ai obtenu l'erreur suivante

application \main.ts (1,36) : erreur TS2307 : Impossible de trouver le module ./app.module.ngfactory'.

Comment puis-je générer le app.module.ngfactory fichier ? Quel outil dois-je utiliser ?

Answer 1

Les compilateurs JIT et AOT génèrent tous les deux un fichier AppModuleNgFactory à partir du même code source de l'AppModule.

Le compilateur JIT crée cette classe d'usine à la volée, en mémoire, dans le navigateur. Le compilateur AOT sort la factory dans un fichier physique que nous importons ici dans la version statique de main.ts

À un niveau élevé, @angular/compiler-cli fournit une enveloppe autour de la fonction tsc et AoT compile le code de votre application, puis transpose le Typescript de votre application en Javascript :

$ ngc -p src

Cela génère un nouveau fichier pour chaque composant et module ( appelé un NgFactory )

Pour exécuter votre application en mode AoT , il suffit de modifier votre fichier main.ts de la manière suivante

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

à

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

---

EDITAR:

Pour utiliser ngc la commande, installez d'abord ces

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

ngc est un remplacement direct de tsc que vous trouverez dans ./node_modules/.bin/ngc dossier.

Answer 2

2017 UPDATE

En janvier 2017 Si vous utilisez angular-cli La compilation AOT est désormais la méthode de compilation par défaut lors de l'exécution de la commande suivante ng build --prod sans qu'il soit nécessaire de modifier le code.

Si vous voulez désactiver AOT et utiliser JIT en production, vous pouvez utiliser ng build --prod --no-aot .

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

---

Cela signifie que vous pouvez toujours utiliser la compilation JIT tout en développant (la compilation sera plus rapide, donc très pratique) avec ng build et laissez votre .ts comme quelque chose comme ça :

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

---

Pour résumer :

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