webpack + Angular 2（rc5） - 在生成版本中不呈现的组件

Question

我坚持尝试使用带有Angular 2（RC5）的WebPack来进行生产构建。

在这里的入门项目之后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>

这是我的家“视图”组件.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