Angulation+AOT+Webpack+NgTools-生成ngFactory的问题

Question

 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

就目前而言，我一直忽略第一个问题（部分原因是我似乎找不到任何在线上有此错误的人，部分原因是我搜索了我的整个代码库，不包括节点模块，并且窗口在代码中没有出现），但如果有人知道这可能来自哪里（或者如果您认为它与错误2和3有关），我愿意接受建议。

但是，我认为第二条和第三条错误消息是我的问题的主要来源，因为很明显app.module.ts在main-aot.ts之前没有编译，所以当main-aot.ts编译时，它找不到文件。但是，我根据我找到的文档专门设置了它，以便在编译器到达main-aot.ts时，app.module.ngfactory就可以编译它了。

显然，在我的设置中有一些缺失，因为我在网上找到的每一个解决方案的设置都略有不同，我似乎无法缩小问题的范围。我所知道的是，到目前为止，我还没有尝试消除这个错误（或产生任何其他新错误），我希望任何成功设置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”，in my package.json。就相关的包版本而言，所有angular包都在4.1.0上，我使用@ngtools/webpack v1.3.1、webpack v2.3.3和typescript v2.3.0

注：我看到了一些关于aot和某些Typescript/Angular版本的问题，但我们真的很想坚持这些，部分原因是为了与我们的其他Angular应用程序保持一致（现在已经生产了一年多，目前在V4.1.0上，没有兴趣降级），以及对strictnullchecks的支持，等等，我知道我听说过有人用这些版本来使用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中的files数组），以防我设置它时，它会在错误的地方查找我的文件，但却一无所获。

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Answer 1

注意，从您的资源：

在使用NGC编译时，我在ngfactory代码的路径上遇到了一些问题：无法解析“./.../path/to/app/app.module.ngfactory”。这似乎与此问题有关。对我来说，解决方案是在webpack配置中定义genDir，而不是在tsconfig.js文件中定义genDir。

但是，ngtools可以为您完成所有这些，因为它是一个完整的黑盒AOT机制。您将NGC（即NgFactorygeneration）与Angular CLI的AOT前端(NgTools)混合在一起。

我怎么用这些东西？

我的webpack配置与您的配置基本相同，然后我在生产构建中使用ngc来生成工厂······

package.json：

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

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}!`);
});