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

Question

我一直试图在我的Angular应用程序中使用ngTools设置AOT(使用Webpack进行模块加载)并且有一个绝对的噩梦.我已经浏览了这里和这里的文档中的各种资源,并阅读了ngTools自述文件,查看了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构建的命令(我从我分享给角文档的第一个链接中的设置中提取)"build:aot": "webpack --config webpack.config.aot.js",在我的package.json中.至于相关的软件包版本我在4.1.0所有角度软件包,我正在使用@ngtools/webpack v1.3.1,webpack v 2.3.3和typescript v2.3.0

注意:我已经看到了一些关于aot和某些打字稿/角度版本的问题,但我们真的希望坚持这些部分以与我们的其他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中的文件数组),以防我设置它,因为它在我的文件的错误位置找不到它.

这是我的主要内容:

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

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

我担心它会成为我错过的一个愚蠢的小作品,但到目前为止我一直在尝试一切,似乎很多其他人在网上也在努力使用这个设置,似乎没有任何关于如何做到这一点的在线清楚信息所以我想我会发布在这里希望有一个实际上成功地在Angular + Webpack应用程序中工作的人可以指出我正确的方向或共享资源,帮助他们出来.提前致谢!

Answer 1

请注意，来自您的资源：

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

但是，ngtools所有这些都为您完成，因为它旨在成为一个完整的黑盒 AOT 机制。您正在与 Angular CLI 的 AOT 前端 ( )混合ngc（即ngfactory生成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}!`);
});