Angular 2 提前编译器找不到 ngfactory？

Question

更新

我仍在努力解决这个问题，但现在 ngc cli 没有给我任何错误。但是它仍然没有生成我的 NGFactory 文件。我已将所有内容更新到最新版本。

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 不在我的 tsconfig 指向的“aot”文件夹中!

请帮忙!

我是 Angular 2 的新手，一直在尝试使用 webpack 为我构建一个捆绑文件。但是，这个文件超过 3mb。所以我想我会考虑使用 System JS(我问了一个问题)。

但是在查看时，我发现了为什么我的捆绑文件如此之大，因为我使用的是 JIT 编译器方法来构建代码。因此，我一直在尝试使用 AOH 编译器构建我的简单小应用程序(来自 Anagular 站点的入门应用程序)。但我无法让它工作。

这是我的 ts 配置代码:

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 let 构建捆绑文件有何影响，我是否无法让它工作，我还没有走那么远，但我们非常欢迎任何帮助。

谢谢。

Answer 1

您确定您的 app.module.ngfactory 文件路径正确吗？我必须从 app.module.ngfactory 复制路径才能使我的 main.ts 正常工作，结果如下:

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

另外，我刚刚从您的帖子中看到了这一点:

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

我的 app.module.ngfactory 没有生成，因为我没有正确版本的 typescript 。我在我的 package.json 文件中更改为以下内容并生成了它:

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