Angular 4 with webpack: forms module in every chunk

Question

I am developing an application with Angular 4 with webpack as bundler. Everything works fine except bundling regarding forms.es5.js. Unfortunately this module is packed into every chunk webpack is creating.

How can i tell webpack to leave this module out of the chunks, because it is already in the main.bundle.js?

Here is the relevant part of my webpack config:

module.exports = {
    "entry": {
        "main": [
            "./src/main.ts"
        ],
        "polyfills": [
            "./src/polyfills.ts"
        ],
        "vendor": [
            "./src/vendor.ts"
        ]
    },
    "resolve": {
        "extensions": [
            ".ts",
            ".js"
        ],
        "modules": [
             "./node_modules",
        ],
        "symlinks": true
    },
    "resolveLoader": {
        "modules": [
            "./node_modules",
        ]
    },
    "output": {
        "path": path.join(process.cwd(), "dist"),
        "publicPath": "/assets/",
        "filename": "[name].bundle.js",
        "chunkFilename": "[id].chunk.js"
    },
    "module": {
        "rules": [
            {
                "enforce": "pre",
                "test": /\.js$/,
                "loader": "source-map-loader",
                "exclude": [
                    /\/node_modules\//
                ]
            },
            {
                 "test": /\.html$/,
                "loader": "raw-loader"
            },
            {
                "test": /\.ts$/,
                "loader": "@ngtools/webpack"
            },
            {
                "test": /\.css$/,
                "use": [ 'style-loader', 'css-loader' ]
            },
            {
                "test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
                "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
            }
        ]
    },
    "plugins": [
        new ProvidePlugin({
            _: 'lodash'
        }),
        new ContextReplacementPlugin(/moment[\/\\]locale$/, /de/),
        new NoEmitOnErrorsPlugin(),
        new ProgressPlugin(),
        new GlobCopyWebpackPlugin({
            "patterns": [
                "assets"
            ],
            "globOptions": {
                "cwd": path.join(process.cwd(), "src"),
                "dot": true,
                "ignore": "**/.gitkeep"
            }
        }),
        new HtmlWebpackPlugin({
            "template": "./src/index.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/faq.html",
            "filename": "./faq.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/terminvereinbarung.html",
            "filename": "./terminvereinbarung.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/filialsuche.html",
            "filename": "./filialsuche.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/suche.html",
            "filename": "./suche.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/dividendenrechner.html",
            "filename": "./dividendenrechner.html",
        }),
        new CommonsChunkPlugin({
            name: ['main', 'vendor', 'polyfills']
        }),
        new ExtractTextPlugin('styles.css')
    ]
};

Thanks a lot.

Answer 1

For other persons stumbling about this: as often, the problem sat in front of the PC.

The issue was, that the i imported the forms module also in my App-Component, as well as in the submodules.