的WebPack + 2角（RC5） - 未在生產渲染組件構建

我卡在試圖獲得生產版本使用的WebPack與角2（RC5）工作。的WebPack + 2角（RC5） - 未在生產渲染組件構建

繼這裏的啓動項目 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元素，但他們沒有的內容。靜態頁面文本顯示正常，但不是其中的組件。這也恰好爲我的頁眉和頁腳部件（外<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)

在此先感謝您的幫助！

來源

2016-08-24 thescientist

是U拼寫正確選擇在HTML和親切的後都出現在控制檯 – rashfmnb

的錯誤，我覺得拼寫應該罰款，除非從開發什麼樣的變化，以督促建設。我會更新以包括棄用警告和post-list.component.ts – thescientist