的WebPack + 2角（RC5） - 未在生产渲染组件构建

Question

我卡在试图获得生产版本使用的WebPack与角2（RC5）工作。

继这里的启动项目 https://github.com/AngularClass/angular2-webpack-starter

我已经能够完成至今以下内容：

1. 开发版本，在本地运行，现场重装等没有问题
2. 生产建设用警告我的Abngular 2组件不呈现。在控制台没有错误（除了弃用警告）

所以，就详细了。

这是我webpack.config.common.js

const webpack = require('webpack'); 
const helpers = require('./webpack.helpers'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; 

const METADATA = { 
    title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass', 
    baseUrl: '/', 
    isDevServer: helpers.isWebpackDevServer() 
}; 

module.exports = { 

    metadata: METADATA, 

    entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'main':  './src/main.ts' 
    }, 

    resolve: { 

    extensions: ['', '.ts', '.js', '.json'], 

    root: __dirname + './src', 

    modulesDirectories: ['node_modules'], 

    }, 

    module: { 

    preLoaders: [], 

    loaders: [{ 
     test: /\.ts$/, 
     loaders: [ 
     'awesome-typescript-loader', 
     'angular2-template-loader', 
     '@angularclass/hmr-loader' 
     ], 
     exclude: [/\.(spec|e2e)\.ts$/] 
    }, { 
     test: /\.less/, 
     loader: "to-string!css!less" 
    }, { 
     test: /\.html$/, 
     loader: 'raw-loader', 
     exclude: [__dirname + './src/index.html'] 
    }, { 
     test: /\.(jpg|png|gif)$/, 
     loader: 'file' 
    }] 
    }, 

    plugins: [ 

    new ForkCheckerPlugin(), 

    new webpack.optimize.OccurenceOrderPlugin(true), 

    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['polyfills', 'vendor'].reverse() 
    }), 

    new CopyWebpackPlugin([{ 
     from: './src/components/bootstrap/images/favicon.png', 
     to: './assets/images/favicon.png' 
    }, { //TODO add using import? 
     from: './node_modules/bootstrap/dist/css/bootstrap.min.css', 
     to: './assets/vendor/bootstrap.min.css' 
    }, { //TODO add using import? 
     context: './node_modules/bootstrap/dist/fonts/', 
     from: '*', 
     to: './assets/fonts/' //bootstrap hardcoded path to fonts one directory up from the CSS... >: 
    }, { //TODO add using import? 
     context: './node_modules/ckeditor/', 
     from: '**/**', 
     to: './assets/vendor/ckeditor/' 
    }]), 


    new HtmlWebpackPlugin({ 
     template: 'src/index.html', 
     chunksSortMode: 'dependency' 
    }), 

    ], 

    node: { 
    global: 'window', 
    crypto: 'empty', 
    process: true, 
    module: false, 
    clearImmediate: false, 
    setImmediate: false 
    } 

}; 

这里是我的webpack.config.dev.js

const helpers = require('./webpack.helpers'); 
const webpackMerge = require('webpack-merge'); 
const commonConfig = require('./webpack.config.common.js'); 
const DefinePlugin = require('webpack/lib/DefinePlugin'); 
const ENV = process.env.ENV = process.env.NODE_ENV = 'development'; 
const HOST = process.env.HOST || 'localhost'; 
const PORT = process.env.PORT || 3000; 
const HMR = helpers.hasProcessFlag('hot'); 
const METADATA = webpackMerge(commonConfig.metadata, { 
    host: HOST, 
    port: PORT, 
    ENV: ENV, 
    HMR: HMR 
}); 

module.exports = webpackMerge(commonConfig, { 

    metadata: METADATA, 

    debug: true, 

    devtool: 'cheap-module-source-map', 

    output: { 

    path: __dirname + './build', 

    filename: '[name].bundle.js', 

    sourceMapFilename: '[name].map', 

    chunkFilename: '[id].chunk.js', 

    library: 'ac_[name]', 
    libraryTarget: 'var', 
    }, 

    plugins: [ 

    new DefinePlugin({ 
     'ENV': JSON.stringify(METADATA.ENV), 
     'HMR': METADATA.HMR, 
     'process.env': { 
     'ENV': JSON.stringify(METADATA.ENV), 
     'NODE_ENV': JSON.stringify(METADATA.ENV), 
     'HMR': METADATA.HMR, 
     } 
    }), 
    ], 

    tslint: { 
    emitErrors: false, 
    failOnHint: false, 
    resourcePath: 'src' 
    }, 

    devServer: { 
    port: METADATA.port, 
    host: METADATA.host, 
    historyApiFallback: true, 
    watchOptions: { 
     aggregateTimeout: 300, 
     poll: 1000 
    }, 
    outputPath: __dirname + '/build', 
    proxy:{ 
     '/api/*': { 
     target: 'http://analogstudios.thegreenhouse.io', 
     secure: false, 
     changeOrigin: true 
     } 
    } 
    }, 

    node: { 
    global: 'window', 
    crypto: 'empty', 
    process: true, 
    module: false, 
    clearImmediate: false, 
    setImmediate: false 
    } 

}); 

这里是我的webpack.config.prod.js

const webpackMerge = require('webpack-merge'); 
const commonConfig = require('./webpack.config.common'); 
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 
const DefinePlugin = require('webpack/lib/DefinePlugin'); 
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin'); 
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin'); 
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); 
const WebpackMd5Hash = require('webpack-md5-hash'); 


module.exports = webpackMerge(commonConfig, { 

    debug: false, 

    devtool: 'source-map', 

    output: { 

    path: __dirname + '/build', 

    filename: '[name].[chunkhash].bundle.js', 

    sourceMapFilename: '[name].[chunkhash].bundle.map', 

    chunkFilename: '[id].[chunkhash].chunk.js' 

    }, 

    plugins: [ 
    new WebpackMd5Hash(), 

    new DedupePlugin(), 

    new UglifyJsPlugin({ 
     beautify: false, 
     compress: { screw_ie8: true }, 
     comments: false 
    }), 


    new NormalModuleReplacementPlugin(
     /angular2-hmr/, 
     function() {} 
    ), 

    ], 

    tslint: { 
    emitErrors: true, 
    failOnHint: true, 
    resourcePath: 'src' 
    }, 

    /** 
    * Html loader advanced options 
    * 
    * See: https://github.com/webpack/html-loader#advanced-options 
    */ 
    // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor 
    htmlLoader: { 
    minimize: true, 
    removeAttributeQuotes: false, 
    caseSensitive: true, 
    customAttrSurround: [ 
     [/#/, /(?:)/], 
     [/\*/, /(?:)/], 
     [/\[?\(?/, /(?:)/] 
    ], 
    customAttrAssign: [/\)?\]?=/] 
    }, 

    //TODO needed? 
    /* 
    * Include polyfills or mocks for various node stuff 
    * Description: Node configuration 
    * 
    * See: https://webpack.github.io/docs/configuration.html#node 
    */ 
    node: { 
    global: 'window', 
    crypto: 'empty', 
    process: false, 
    module: false, 
    clearImmediate: false, 
    setImmediate: false 
    } 

}); 

这是我家“查看”HTML

<section class="as-view-home row"> 

    <div class="row"> 
    <div class="col-xs-10"> 

     <h2 class="welcome-text-heading">Welcome to Analog Studios</h2> 

     <p class="welcome-text-body">Welcome to the up and coming new version of the Analog Studios website. We have a 
     lot of plans in-store and a lot of great features for sharing music and representing artists. Over the next 
     couple of months, we'll be gradually updating the site with more and more content and interactions. Please 
     keep in touch with us through social media by clicking our links.</p> 

     <p>Checkout our latest posts and upcoming events, below!</p> 

    </div> 
    </div> 

    <div class="row"> 
    <div class="col-xs-12"> 

     <div class="posts-container"> 
     <as-posts-list></as-posts-list> 
     </div> 

     <div class="row"> 
     <div class="col-xs-12"> 
      <as-events-calendar></as-events-calendar> 
     </div> 
     </div> 

    </div> 
    </div> 

</section> 

这里是我的家“视图” component.ts

import { Component } from '@angular/core'; 
import { EventsCalendarComponent } from '../../components/events-calendar/events-calendar.component'; 
import { PostsComponent } from '../../components/posts-list/posts-list.component'; 

@Component({ 
    selector: 'home', 
    templateUrl: './home.html', 
    styleUrls: [ './home.less' ], 
    directives: <any>[EventsCalendarComponent, PostsComponent] 
}) 


export class HomeViewComponent { } 

在下面的截图中，你会发现<as-posts-list>和<as-event-calendar>是DOM元素，但他们没有的内容。静态页面文本显示正常，但不是其中的组件。这也恰好为我的页眉和页脚部件（外<router-outlet></router-outlet>）我看到

控制台错误（只废弃警告）

vendor.0074bf4….bundle.js:1 NgModule t uses e via "entryComponents" but it was neither declared nor imported! This warning will become an error after final. 
2016-08-24 10:40:36.707 vendor.0074bf4….bundle.js:1 NgModule t uses e via "entryComponents" but it was neither declared nor imported! This warning will become an error after final. 
2016-08-24 10:40:36.707 vendor.0074bf4….bundle.js:1 NgModule t uses t via "entryComponents" but it was neither declared nor imported! This warning will become an error after final. 
2016-08-24 10:40:36.707 vendor.0074bf4….bundle.js:1 NgModule t uses t via "entryComponents" but it was neither declared nor imported! This warning will become an error after final. 
2016-08-24 10:40:36.707 vendor.0074bf4….bundle.js:1 NgModule t uses e via "entryComponents" but it was neither declared nor imported! This warning will become an error after final. 
2016-08-24 10:40:36.707 vendor.0074bf4….bundle.js:1 NgModule t uses t via "entryComponents" but it was neither declared nor imported! This warning will become an error after final. 
2016-08-24 10:40:37.000 vendor.0074bf4….bundle.js:1 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. 
2016-08-24 10:40:37.006 vendor.0074bf4….bundle.js:1 The PLATFORM_DIRECTIVES provider and CompilerConfig.platformDirectives is deprecated. Add the directives to an NgModule instead! (Directives: n,n,n,e,e,e,e,e,e,e,e,e,e,e,e,e) 

在此先感谢您的帮助！

Answer 1

这似乎是新的RC5版本中的一个错误。当时唯一的解决方法似乎不是缩小构建版本。

见https://github.com/angular/angular/issues/10618