How to avoid loading from chunk in webpack? [Angular] [inline js]

Question

I am trying to bundle a angular project into a single file (js, css and html). I've managed to get the html and css working and js is also inline now (using HtmlWebpackInlineSourcePlugin). The js files generated after minification are like below:

The vendor, main and polyfill are inline in the index.html. But I see that the generated js for main and vendor js are trying to load from the chunk 3.js (this has the actual js that's written for the app).

I want this chunk also to be inline, but can't seem to find a way to do it. Even if I did manage to make it inline, how do I avoid vendor/main js from loading this chunk. The webpack config is below.

'use strict';

const webpackMerge         = require('webpack-merge');
const ngw                  = require('@ngtools/webpack');
const HtmlWebpackPlugin    = require('html-webpack-plugin');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const isDev                = process.env.NODE_ENV !== 'production';

//just a wrapper for path
const helpers              = require('./helpers');

module.exports = {
    mode: 'production',

    output: {
        path: helpers.root('dist'),
        filename: '[name].js',
    },

    resolveLoader: {
        modules: [helpers.root('node_modules')]
    },

    entry: {
        vendor: './src/vendor.ts',
        polyfills: './src/polyfills.ts',
        main: './src/main.ts'
    },

    resolve: {
        extensions: ['.ts', '.js', '.scss']
    },

    module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    { loader: 'style-loader', options: { sourceMap: isDev } },
                    { loader: 'css-loader', options: { sourceMap: isDev } },
                    { loader: 'sass-loader', options: { sourceMap: isDev } }
                ],
                include: helpers.root('src', 'assets')
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    'to-string-loader',
                    { loader: 'css-loader', options: { sourceMap: isDev } },
                    { loader: 'sass-loader', options: { sourceMap: isDev } }
                ],
                include: helpers.root('src', 'app')
            },
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                loader: '@ngtools/webpack'
            }
        ]
    },

    plugins: [
        new ngw.AngularCompilerPlugin({
            tsConfigPath: helpers.root('tsconfig.json'),
            entryModule: helpers.root('src', 'app', 'app.module#AppModule')
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            inlineSource: '.(js|css)$',
        }),
        new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
       // new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/chunk/])
    ]
};

FYI - I want it to be a single inline file because I need to use in google apps script (editor add on).

Answer 1

I ended up solving this using libraryTarget in webpack to compile to umd.

output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].js',
    libraryTarget: "umd",
    globalObject: 'this'
}