Angular2 ( 2.2.0) & Webpack 2 ( 2.1.0-beta.21) 编译问题运行 build:prod

Question

Angular2 (2.0.1) & Webpack 2 (2.1.0-beta.21) 没问题，我可以执行 nom run build:prod wo 任何问题...

当我将 Angular2 升级到最新版本（2.0.1）时，

npm run build // => 没有错误

但是，

npm run build:prod // => 我得到一个错误

Failed to exec build:prod script..
.... `del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p 
tsconfig.aot.json && webpack --config webpack.config.prod.js --progress   
--profile --bail && del-cli 'public/js/app/**/*.js' 
'public/js/app/**/*.js.map' '!public/js/app/bundle.js'  
'!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 
'assets/app/**/*.shim.ts'`

我的 package.json 中唯一的变化是：

....
"dependencies": {
"@angular/common": "2.2.0",
"@angular/compiler": "2.2.0",
"@angular/compiler-cli": "2.2.0",
"@angular/core": "2.2.0",
"@angular/forms": "2.2.0",
"@angular/http": "2.2.0",
"@angular/platform-browser": "2.2.0",
"@angular/platform-browser-dynamic": "2.2.0",
"@angular/platform-server": "2.2.0",
"@angular/router": "3.2.0",
"@angular/upgrade": "2.2.0",
....

# not changed

"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"angular2-router-loader": "^0.3.2",
"angular2-template-loader": "^0.5.0",
"awesome-typescript-loader": "^2.2.4",
"del-cli": "^0.2.0",
"html-loader": "^0.4.4",
"raw-loader": "^0.5.1",
"typescript": "^2.0.3",
"webpack": "^2.1.0-beta.21",
"webpack-merge": "^0.14.1"

}

webpack.config.common.js

var webpack = require('webpack');

module.exports = {
entry: {
    'app': './assets/app/main.ts'
},

resolve: {
    extensions: ['.js', '.ts']
},

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: [
                'awesome-typescript-loader',
                'angular2-template-loader',
                'angular2-router-loader'
            ]
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.css$/,
            loader: 'raw-loader'
        }
    ]
},

plugins: [
    new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        './src' // location of your src
    )
  ]
};

webpack.config.prod.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');

module.exports = webpackMerge.smart(commonConfig, {
entry: {
    'app': './assets/app/main.aot.ts'
},

output: {
    path: './public/js/app',
    filename: 'bundle.js',
    publicPath: '/js/app/',
    chunkFilename: '[id].[hash].chunk.js'
},

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: [
                'awesome-typescript-loader',
                'angular2-template-loader',
                'angular2-router-loader?aot=true&genDir=public/js/app'
            ]
        }
    ]
},

plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: false
    })
   ]
});

tsconfig.aot.json

{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./public/js/app"
},
"exclude": [
"node_modules",
"dist",
"assets/app/polyfills.ts"
],

"angularCompilerOptions": {
"skipMetadataEmit" : true
}

}

Answer 1

使用最新的 @angular、@angular-compiler 和 @angular/compiler-cli（版本 2.2.0）和 web pack（版本 2.1.0-beta.21）提出了问题 ...我还测试了最新版本 2.2.1 / 2.1.0.beta.27 ...

在生产脚本中，运行

ngc -p tsconfig.aot.json

编译输出tsconfig.aot.json指定目录下的.ngFactory

( outDir: " ./public/js/app"

与我的项目具有相同的目录结构（ /assets/app/... ，因此 webpack 使用的最终路径将是

./public/js/app/assets/app/..

这个路径需要被 webpack 加载器知道（genDir 参数）......所以在我的 webpack.confid.prod.js 我需要声明它：

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: [
                'awesome-typescript-loader',
                'angular2-template-loader',
                'angular2-router-loader?aot=true&genDir=public/js/app/assets/app'
            ]
        }
    ]
},