webpack + Angular 2 (rc5) - компоненты, не рендеринговые в производстве build

Question

Я застрял на попытке создать производственную сборку, используя WebPack с Angular 2 (RC5).

После проекта стартера здесь https://github.com/AngularClass/angular2-webpack-starter

я был в состоянии выполнить следующую до сих пор:

1. сборку разработки, работаю локально, живая перезагрузка, и т.д. без проблем
2. производства строить с оговорка, что мои абергулярные 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