Angular 2/4/5-提前编译如何 [英] Angular 2 / 4 / 5 - Ahead-of-time compilation how to

问题描述

我正在尝试按照本指南引导Angular 2 RC5应用程序 https://angular.io/docs/ts/latest/guide/ngmodule.html 以下是我的代码

I'm trying to bootstrap my Angular 2 RC5 application following this guide https://angular.io/docs/ts/latest/guide/ngmodule.html Below is my code

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

但是，当我尝试编译打字稿代码时，出现以下错误

However , when I tried to compile typescript code, I got the following error

app \ main.ts(1,36):错误TS2307:找不到模块 './app.module.ngfactory'.

app\main.ts(1,36): error TS2307: Cannot find module './app.module.ngfactory'.

如何生成 app.module.ngfactory 文件?我应该使用哪个工具?

How can I generate the app.module.ngfactory file? Which tool should I use?

推荐答案

JIT和AOT编译器均从同一AppModule源代码生成 AppModuleNgFactory 类.

Both the JIT and AOT compilers generate an AppModuleNgFactory class from the same AppModule source code.

JIT编译器在浏览器中的内存中动态创建该工厂类. AOT编译器将工厂输出到一个物理文件，我们将在这里以main.ts的静态版本导入该文件.

The JIT compiler creates that factory class on the fly, in memory, in the browser. The AOT compiler outputs the factory to a physical file that we're importing here in the static version of main.ts

在较高的层次上，@angular/compiler-cli提供了Typescript的tsc编译器的包装，并且两种AoT均会编译应用程序的代码，然后将应用程序的Typescript转换为Javascript:

At a high level, @angular/compiler-cli provides a wrapper around Typescript’s tsc compiler, and both AoT compiles your application’s code, and then transpiles your application’s Typescript to Javascript:

$ ngc -p src

这将为每个组件和模块生成一个新文件(称为 NgFactory )

This generates a new file for each component and module ( called an NgFactory )

要以AoT模式运行您的应用， 所需要做的就是从以下位置更改您的main.ts文件:

To run your app in AoT mode, all that’s required is changing your main.ts file from

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

---

要使用ngc命令，请先安装这些-

To use ngc command, first install these-

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

ngc是tsc的直接替代品，您可以在./node_modules/.bin/ngc文件夹中找到它.

ngc is a drop-in replacement for tsc which you will find it in- ./node_modules/.bin/ngc folder.

这篇关于Angular 2/4/5-提前编译如何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！