Question

大家好我正在使用webpack在一个捆绑包中构建两个角度应用程序。应用程序位于src文件夹中。

这是我的webpack配置

const commonConfig = require('./webpack.common.js');              
const webpack = require('webpack');                               
const webpackMerge = require('webpack-merge');                    
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;                    
const path = require('path');                                     
const nodeModules = path.join(process.cwd(), 'node_modules');        

// Webpack Plugins                                                
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;   
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = webpackMerge(commonConfig, {                  

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

  entry: {                                                     
      polyfills: './src/app-integration/polyfills.ts',              
      main: ['./src/app-integration/main.ts', './src/app-integration/styles/css/app.css'],                                 
      spa_test: './src/spa-test/main.ts'                               
  },                                                              

  output: {                                                         
      path: root('dist'),                                       
      filename: 'js/[name].bundle.js',                     
      chunkFilename: 'js/[id].chunk.js'                                
  },                                                              

  module: {                                                        
    rules: [                                                          
    // Loads external css styles into the DOM                          
    {                                                              
       test: /\.(css|scss)$/,                                       
       use: ['to-string-loader', 'css-loader', 'sass-loader'],  
       include: [root('src/app-integration', 'styles', 'css')]        
    },                                                                  
    {                                                               
       test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,         
       loaders: ['@ngtools/webpack']                                   
    }                                                                   
   ]                                                                    
  },                                                             

  plugins: [

    // Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
    new CommonsChunkPlugin({
      name: "vendor",
      minChunks: function (module) {
        return module.resource && module.resource.startsWith(nodeModules)
      },
      chunks: [
        "main"
      ]
    }),


    new AngularCompilerPlugin({
      "mainPath": "./src/app-integration/main.ts",
      "tsConfigPath": "tsconfig.app.json",
      "skipCodeGeneration": false
    }),

    // Inject script and link tags into html files
    // Reference: https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      template: './src/app-integration/index.html',
      chunksSortMode: function (a, b) {
        var order = ["polyfills", "vendor", "main", "styles"];
        return order.indexOf(a.names[0]) - order.indexOf(b.names[0]);
      }
    }),                                                                      
    new HtmlWebpackPlugin({
      filename : 'spa_test.html',                             
      template: './src/spa-test/index.html'
    })                                                               
   ],                                                                  

  /**                                                                   
   * Dev server configuration                                           
   * Reference: http://webpack.github.io/docs/configuration.html#devserver                
   * Reference: http://webpack.github.io/docs/webpack-dev-server.html  
   */                                                          
   devServer: {
     historyApiFallback: true,
     stats: {
     colors: true,
     hash: true,
     timings: true,
     chunks: false,
     chunkModules: false,
     children: false, // listing all children is very noisy in AOT and hides warnings/errors
     modules: true,
     maxModules: 0,rules: [

     reasons: false,
     warnings: true,
     assets: false, // listing all assets is very noisy when using assets directories
     version: false
   }, // none (or false), errors-only, minimal, normal (or true) and verbose,

   watchOptions: { aggregateTimeout: 300, poll: 1000 },
     open:true,
     overlay: true                                                        
   },                                                                  

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

// Helper functions                                            
function root(args) {                                              
  args = Array.prototype.slice.call(arguments, 0);               
  return path.join.apply(path, [__dirname].concat(args));             
}

当我运行构建两个应用程序并在端口8000上运行第一个应用程序（应用程序集成）的命令npm run webpack-dev-server --config webpack.dev.js --inline --progress --profile --port 8000时，我在浏览器控制台中收到以下错误Error: In this configuration Angular requires Zone.js。之后我在项目中添加了第二个应用程序（spa-test）后出现此错误。

如果有必要，我可以添加有关此问题的更多信息。

更新-------------------------

应用程序同时运行，并且有一个polyfills文件，可以为第一个应用程序加载zone.js. Zone.js永远不会为第二个应用程序加载，只能加载一次。

这是错误Error: In this configuration Angular requires Zone.js的原因。

Answer 1

您必须缺少npm依赖zone.js。运行npm install --save zone.js，然后重试。

为您提供更多见解：角度需求zone.js。一篇非常好（相当古老）的文章here。

Webpack将两个应用程序捆绑在一个捆绑包中，Angular需要Zone.js

1 个答案: