Angular 4 AOT with webpack

问题描述：

我正在使用angularpack 4与webpack 2 &试图使用AOT，但它给了我这个错误：10% building modules 4/5 modules 1 active ..._modules/intl/locale-data/jsonp/en.jsModuleNotFoundError: Module not found: Error: Can't resolve './../$$_gendir/src/app/app.module.ngfactory' in '/Users/xyz/angular-upgrade/backend/myapp/angular/src'。Angular 4 AOT with webpack

这是我的webpack.config：

new AotPlugin({ 
    tsConfigPath: './tsconfig.json', 
    entryModule: './src/app/app.module#AppModule' 
}),

，我使用，使生成的脚本是："build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"

下面是我的tsconfig.json：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": ["es2015", "dom"], 
    "noImplicitAny": false, 
    "suppressImplicitAnyIndexErrors": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "bower_components" 
    ] 
}

这些'ngfactory'文件应该已经自动创建执行构建过程中链 - 这将是AOT的结果。也许在https://angular.io/docs/ts/latest/cookbook/aot-compiler.html查看并查看你的构建命令和配置是否正确（搜索'ngc'） –

我认为我不需要ngc在这里，因为我使用'@ ngtools/webpack' –

答

AOT不支持打字稿现在版本高于2.0.10。你需要确保。此外，您必须将一些角模块（如http，平台浏览器或内核）更改为角度2 - 我使用版本2.4.0 - ，因为2.0.10或更低版本的打字稿不支持它们！

现在使用2.4.0版本和[email protected]仍然是同样的问题，你使用webpack的AOT？＆你可以在这里粘贴你的package.json吗？ –

“dependencies”：“@ angular/animations”：“^ 4.0.1”， “@ angular/common”：“2.4.0”， “@ angular/compiler”：“2.4.0”， “@ angular/core”：“2.4.0”， “@ angular/flex-layout”：“^ 2.0.0-beta.7”， “@ angular/forms”：“2.4.0”， “ @ angular/http“：”2.4.0“， ”@ angular/material“：”^ 2.0.0-beta.2“， ”@ angular/platform-browser“：”2.4.0“， ”@角度/平台浏览器动态“：”2.4.0“， ”@ angular/router“：”3.4.0“， ”core-js“：”2.4.1“， ”font-awesome“：” “4.7.0”， “hammerjs”：“^ 2.0.8”， “primeng”：“^ 2.0.3”， “rxjs”：“^ 5.3.0”， “zone.js”：“^ 0.7.8” –

“@ angular/cli”：“1.0.0-rc.1”， “@ angular/compiler- cli“：”^ 2.4.0“， ”@ types/jasmine“：”2.5.38“， ”@ types/node“：”〜6.0。“茉莉花 - 核心”：“〜2.5.2”， “jasmine-spec-reporter”：“〜3.2.0”， “因果报应”：“〜2.0.0”， “codelyzer”：“〜2.0.0”， “ “〜1.4.1”， “karma-chrome-launcher”：“〜2.0.0”， “karma-cli”：“〜1.0.1”， “karma-jasmine”：“〜1.1.0” ， “karma-jasmine-html-reporter”：“^ 0.2.2”， “karma-coverage-istanbul-reporter”：“^ 0.2.0”， “karma-mocha-reporter”：“^ 2.2。 3“， ”量角器“：”〜5.1.0“， ”ts-node“：”〜2.0.0“， ”tslint“：”〜4.5.0“， ”typescript“：”2.0.10 “（Devdependencies） –

答

我有一个类似的错误与$$_gendir

每this post从构建命令CLI删除--bail使我看到更多的错误消息，因为$$_gendir错误更造成在生产前的错误的通用消息。

答

首先：您需要使用@ ngtools/webpack进行编译。然后你的编译器选项并不像Angular期望的那样。

请确保您根据Official Angular AOT Cookbook

例如配置设置和tsconfig.json模块属性需要设置为：

"module": "es2015"

此外，你应该告诉NGC在那里把生成的源通过指定

"angularCompilerOptions": { 
"genDir": "aot", 
"skipMetadataEmit": true 
}

Angular 4 AOT with webpack

相关推荐