Angular AOT Webpack NgTools – 问题生成ngFactory

我一直试图在我的Angular应用程序中使用ngTools设置AOT(使用Webpack进行模块加载)并且有一个绝对的噩梦.我已经浏览了文档 here和 here中的各种资源以及阅读ngTools自述文件,查看了Angular CLI中的示例(此应用程序不是使用Angular CLI构建的,但我认为它至少是一个有用的参考资料)通过 this resource在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

目前我一直在忽略第一个问题(部分是因为我似乎无法在网上发现任何其他人有这个错误,部分是因为我搜索了我的整个代码库,不包括节点模块,并且窗口不会出现在任何地方代码)但我愿意接受建议,如果有人知道可能来自哪里(或者你认为它与错误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构建的命令(我从我分享给角文档的第一个链接中的设置中提取)是“build：aot”：“webpack –config webpack.config.aot.js”,in我的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$/,{ test: /\.ts$/,loader: '@ngtools/webpack' }
    ]
  }
}

关于entryModule的注释.在一些资源中,我看到stateModule选项必须在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应用程序中工作的人可以指出我正确的方向或共享资源,帮助他们解决它出.提前致谢！

解决方法

请注意,从您的资源：

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 generation)与Angular CLI的AOT前端(ngtools)混合使用.

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

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

我怎么用这个东西？

我的webpack配置与你的配置非常相似,然后我在生产版本中使用ngc来生成工厂……

的package.json：

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

并使用工厂和服务器端渲染……

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

Angular AOT Webpack NgTools – 问题生成ngFactory

解决方法

相关推荐