Webpack два приложения в одном комплекте, для Angular требуется Zone.js

Привет всем Я создаю два угловых приложения в одном комплекте с 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

1 ответ

Вы должны упустить npm dependency zone.js Запустите npm install --save zone.js а затем повторите попытку.

Чтобы дать вам больше информации: Угловые потребности zone.js Очень хороший (довольно старая) статья здесь.

licensed under cc by-sa 3.0 with attribution.