webpack + Angular 2（rc5） - プロダクションビルドでレンダリングされないコンポーネント

Question

WebPackをAngular 2（RC5）で使用してプロダクションビルドを実行しようとしています。ローカルで実行している、

1. 開発ビルド、ライブリロードなどで
2. 生産構築していない問題：私はこれまでのところ、以下を達成することができました https://github.com/AngularClass/angular2-webpack-starter

   ここスタータープロジェクトに続き

   私の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要素であることを気づくでしょうが、彼らは何のコンテンツを持っていません。静的ページのテキストは上に表示されますが、その中のコンポーネントは表示されません。これはまた、任意の助けを事前に私が見てい

コンソールエラー（単に警告をと非推奨）

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) 

おかげで（<router-outlet></router-outlet>の外で）私のヘッダーとフッターのコンポーネントのために起こります！

Answer 1

これは新しいRC5リリースのバグだと思われます。その時の唯一の回避策はビルドを小さくすることではないようです。

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