将两个应用程序打包在一个包中，Angular requires Zone.js

大家好，我正在用webpack在一个包中构建两个Angle应用程序。应用程序位于src文件夹中

这是我的网页配置

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上运行第一个应用程序（应用程序集成）时，我在浏览器控制台中得到以下错误

错误：在此配置中，需要Zone.js

。在我在项目中添加第二个应用程序（spa测试）之后，出现了这个错误

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

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

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

---

这就是错误的原因：在此配置中，Angular requires Zone.js

必须缺少npm依赖项

Zone.js

。运行

npm安装--保存zone.js

，然后重试

---

给你更多的洞察力：角度需求

zone.js

。这是一篇相当不错（相当老）的文章。

谢谢你的回答，Rakesh，zone.js已经安装。事实上，问题更复杂，我有两个应用程序在同一时间运行，还有一个polyfills为第一个应用程序加载zone.js。Zone.js不会在第二次加载，只能加载一次。