Question

更新

我仍在努力，但现在ngc cli没有给我任何错误。但是它仍然没有制作我的NGFactory文件。我已经更新了最新版本的eveything。

tsconfig.js

{
 "compilerOptions": {
   "target": "es5",
   "module": "es2015",
   "moduleResolution": "node",
   "sourceMap": false,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "lib": ["es2015", "dom"],
   "noImplicitAny": true,
   "suppressImplicitAnyIndexErrors": true
 },

 "files": [
   "./typescript/modules/app.module.ts"
   // "./typescript/main.ts" <- see (1)
 ],

 "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
 }
}

（1） - 重新启动此文件，引导我的A2应用程序，因此指向我的NgFactory文件，意味着ngc现在运行没有任何错误。

然而，它似乎读取了我的app.module文件，并创建了一个node_modules文件并为A2本身制作了大量工厂文件。但我的代码，我的app.module.ngfactory不在＆＃39; aot＆＃39;我的tsconfig指向的文件夹！

请帮忙！

我是Angular 2的新手，并且一直在使用webpack来为我构建一个bundle文件。但是，这个文件超过3mb。所以我想我会考虑使用System JS（我问一个问题）。

但是在考虑这一点时，我发现了为什么我的bundle文件在哪里如此之大，因为我正在使用JIT编译器方法来构建代码。所以我一直在努力让我的简单小应用程序（来自Anagular网站的入门应用程序）使用AOH编译器来构建。但我无法让它发挥作用。

这是我的配置代码：

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },

  "files": [
    "./typescript/modules/app.module.ts",
    "./typescript/main.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : true
  }
}

我的组件代码我将moduleId添加到@Component和window.module = 'aot';设置到我加载应用的html文件中。我的组件代码：

app.components.ts

 import { Component } from '@angular/core';

 @Component({
   moduleId: module.id,
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`
 })

 export class AppComponent { name = 'Angular'; }

这是我当前的应用模块代码，与我使用的示例相同。

app.module.ts

 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent }  from '../components/app.component';

 @NgModule({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })

 export class AppModule { }

现在我的main.ts文件，这似乎是给我我的问题。我已将导入语句更改为使用NgFactory，但这根本不起作用！

Main.ts

 import { platformBrowser }    from '@angular/platform-browser';
 import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory'; (1)

 platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

 (1) - this file is not generted at all!

因此，当我运行node_modules/.bin/ngc（在Ubuntu 16.04 VM中运行）时，出现以下错误：

 Error at /var/www/typescript/main.ts:10:36: 
 Cannot find module './modules/app.ngfactory'. <-- ????????

是的，我已经安装了@angular/compiler-cli & @angular/platform-server

是的，我确实找到了这个问题，Angular 2 - Ahead-of-time compilation how to - 但是当我将main.ts文件更改为指向另一个文件夹时，我得到同样的错误....

那么我做错了什么？

我也不确定如何使用webpack来构建一个捆绑文件，我有没有让它工作，我还没有那么远，但任何帮助都会受到欢迎。

感谢。

Answer 1

您确定这是app.module.ngfactory的正确文件路径吗？我不得不从app.module.ngfactory复制路径以使我的main.ts工作，结果只是如下：

import { AppModuleNgFactory } from './app.module.ngfactory';

我也是从你的帖子中看到的：

（1） - 这个文件根本没有发生！

我的app.module.ngfactory没有生成，因为我没有正确版本的打字稿。我在package.json文件中更改为以下内容并生成：

"awesome-typescript-loader": "3.0.0-beta.17",
"typescript": "2.0.3"

Answer 2

这可能不是一个完整的答案，但从我所做的有限测试来看，似乎确实有效。

我可以跨越这个git hub A2启动项目，https://github.com/jbalbes/angular2-aot-webpack。我将其下载到一个正常工作的测试文件夹中，它运行，ngc命令创建了项目.ngfactory文件。

但是，此项目使用的是旧版本的A2。所以我做了一些测试，我已经将package.json中的A2依赖项更新为2.4.1。之后它还在工作。所以我添加了所有的包，认为其中一个或多个包含ngc编译器的某些问题。

然而，似乎没有什么可以解决它的工作，直到我添加typescript，到2.1.4 - 然后它没有产生任何ngfactory文件。

如果其他任何人遇到AOT和打字稿2.1.4的问题，请告诉我。（我也尝试过2.1.1而且只是出现了很多错误）

Angular 2 Ahead-of-Time Compiler没有找到ngfactory？

请帮忙！

2 个答案: