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

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));

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

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

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

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

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