Hello everyone I am building two angular applications in one bundle with webpack. The applications are in the src folder.
Here is my webpack config
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));
}
When I run the command npm run webpack-dev-server --config webpack.dev.js --inline --progress --profile --port 8000 which builds the two apps and runs the first one (app-integration) on port 8000, I get the following error Error: In this configuration Angular requires Zone.js in browser console. This error appeared after that I added the second application (spa-test) in my project.
I can add more information about this problem if it is necessary.
UPDATE -------------------------
The applications are running at the same time and there is a polyfills file which loads zone.js for the first app. Zone.js is never loaded for the second app and it can be loaded just once.
This is the cause of the error Error: In this configuration Angular requires Zone.js.
