Angular + AOT + Webpack + NgTools - 问题生成 ngFactory

Question

我一直在尝试使用 ngTools 在我的 Angular 应用程序中设置 AOT(使用 Webpack 进行模块加载)，并且有一段时间绝对是噩梦。我已经浏览了文档中的各种资源 here和 here以及通读 ngTools 自述文件，查看通过 this resource 找到的隐藏在 Angular CLI 中的示例(该应用程序不是用 Angular CLI 构建的，但我认为它至少是一个有用的引用)在 Angular + Webpack + Sass + ngTools 上(我也使用 SASS，但是用我的 webpack.config.aot.js 编译得很好 - 不过它确实阻止我切换到 ngc，至少就我发现的而言，这是我在一些示例中看到的)，以及过去几天我发现的每个 github 问题或 stackoverflow 帖子，无论我尝试构建 aot 做什么都会产生以下错误:

 ERROR in window is not defined

 ERROR in /Users/nataliecoley/development/company-app-name/src/main-aot.ts (2,36): Cannot find module '../aot/src/app/app.module.ngfactory'.

 ERROR in ./src/main-aot.ts

找不到模块:错误:无法解析“/Users/nataliecoley/development/company-app-name/src”中的“../aot/src/app/app.module.ngfactory”
@ ./src/main-aot.ts 2:0-73

目前我一直忽略第一个问题(部分是因为我似乎无法在网上找到其他人有该错误，部分是因为我搜索了我的整个代码库，不包括节点模块，并且 window 没有出现代码中的任何地方)但如果有人知道这可能来自哪里(或者如果您认为它与错误 2 和 3 相关)，我愿意接受建议。

尽管我认为第二个和第三个错误消息是我问题的主要来源，因为很明显 app.module.ts在 main-aot.ts 之前没有被编译所以到时候 main-aot.ts去编译它找不到文件。但是，我根据我专门找到的文档进行了设置，以便它已经被编译和 app.module.ngfactory编译器到达时准备就绪 main-aot.ts .

显然，我的设置中缺少某些部分，因为我在网上找到的每个解决方案的设置都略有不同，我似乎无法缩小问题的范围。我所知道的是，到目前为止我所尝试的任何操作都无法消除此错误(或产生任何其他新错误)，我希望任何成功设置 AOT + ngTools + webpack + Angular 的人提供帮助，以缩小正在发生的事情的范围这里。

这是我的文件结构(简化):

.
+-- config/
|   +-- helpers.js
|   +-- webpack.common.js
|   +-- webpack.dev.js
|   +-- webpack.prod.js
+-- src/
|   +-- app/
|   +-- assets/
|   +-- vendor/
|   +-- index.html
|   +-- main.ts
|   +-- main-aot.ts
|   +-- polyfills.ts
|   +-- tsconfig.json
+-- package.json
+-- server.js
+-- tsconfig-aot.json
+-- webpack.config.aot.js
+-- webpack.config.js (only contains: module.exports = require('./config/webpack.dev.js');)

我用来运行我的 aot 构建的命令(我从我共享给 angular 文档的第一个链接中的设置中提取)是 "build:aot": "webpack --config webpack.config.aot.js",在我的 package.json 中。至于相关的包版本，我在 4.1.0 上用于所有 angular 包，我正在使用 @ngtools/webpack v1.3.1 , 和 webpack v 2.3.3和 typescript v2.3.0
注意:我已经看到一些关于 aot 和某些 typescript /Angular 版本的问题，但我们真的很想坚持使用这些问题，以与我们的其他 Angular 应用程序保持一致(现在已经生产了一年多，目前在 v4.0 版本)。 1.0 对降级不感兴趣)以及支持严格空检查等。我知道我听说有人使用这些版本进行 AOT 工作，而且任何人都必须使用旧版本的 Angular 似乎很荒谬使用 AOT 所以我觉得必须有办法让它工作。

这是我的 tsconfig-aot.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "skipLibCheck": true,
    "skipCodeGeneration": false,
    "typeRoots": [
      "../node_modules/@types/"
    ]
 },
  "files": [
    "src/app/app.module.ts",
    "src/main-aot.ts"
  ],
  "compileOnSave": true,
  "angularCompilerOptions": {
    "genDir": "aot",
    "entryModule": "src/app/app.module#AppModule",
    "skipMetadataEmit": true
  }
}

这是我的 webpack.config.aot.js:

const ngtools = require('@ngtools/webpack');
const webpack = require('webpack');
const helpers = require('./config/helpers');


module.exports = {
  devtool: 'source-map',
  entry: {
    main: './src/main-aot.ts'
  },
  resolve: {
     extensions: ['.ts', '.js']
  },
  target: 'node',
  output: {
    path: helpers.root('dist'),
    filename: 'build.js'
  },
  plugins: [
    new ngtools.AotPlugin({
      tsConfigPath: helpers.root('tsconfig-aot.json'),
      entryModule: helpers.root('src', 'app', 'app.module#AppModule')
    }),
    new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
  ],
  module: {
    rules: [
      {
         test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
         loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      { test: /\.css$/, loader: 'raw-loader' },
      {
        test: /\.scss$/,
        loaders: ['to-string-loader', 'style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
      },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.ts$/, loader: '@ngtools/webpack' }
    ]
  }
}

关于 entryModule 的说明。在我看到的一些资源中，entryModule 选项必须在 tsconfig-aot.json 中。 ，不在 webpack.config.aot.js里面，我见过的其他示例仅将其放在 webpack.config.aot.js 中.我只是在 tsconfig-aot.json 中尝试过它，只是 webpack.config.aot.js以及以上两者 - 这些选项似乎都不能解决问题。我也试过编辑各种东西的文件路径(比如我的 tsconfig-aot.json 中的文件数组)，以防我设置它以便它在错误的地方寻找我的文件并且无处可去。

这是我的主要 aot.ts:

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

我担心这只是我遗漏的一个愚蠢的小部分，但到目前为止我一直在尝试一切，似乎很多其他在线人也在为这个设置而苦苦挣扎，似乎没有任何在线清除有关如何正确操作的信息，所以我想我会在这里发布，希望真正成功地在 Angular + Webpack 应用程序中工作的人可以为我指明正确的方向或分享帮助他们理解的资源出来。提前致谢!

Answer 1

请注意，来自您的资源:

I had some trouble with the path to the ngfactory code when compiling with ngc: Can't resolve './../path/to/app/app.module.ngfactory' This seems related to this issue. The solution for me was to define the genDir in the webpack config rather than the tsconfig.js file.

然而， ngtools为您完成所有这些，因为它旨在成为一个完整的黑盒 AOT 机制。您正在调和 ngc (即 ngfactory 代)与 Angular CLI 的 AOT 前端( ngtools )。

如果您想使用 ngfactories您必须使用 ngc 构建您的应用程序.就个人而言，我使用 ngtools 进行开发构建，然后使用 ngc以及 Angular Universal 服务器端渲染器。

请注意 ngtools有一个使开发相当痛苦的错误 - 在第二次重新编译之前不会识别更改:
https://github.com/angular/angular-cli/issues/5137

我怎么用这个东西？

我的 webpack 配置和你的差不多，然后我使用 ngc在生产构建中生成工厂......

包.json:

"aot": "./node_modules/.bin/ngc -p tsconfig-aot.json",

并将工厂与服务器端渲染一起使用......

服务器.ts:

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from './dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = process.env.PORT || 8081;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname, 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src')

app.get('*.*', express.static(join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});