Getting 404 on angular application load - http-status-code-404

Question

I have upgraded my angular application from version 12 to 14. I'm using custom Webpack. In MVC view I have added the main.js script. But on page load I'm getting 404 for all the HTML & CSS pages. I need to generate 2 output files main.js & main.bo.js. Based on the user role I'm loading corresponding MVC page. One view is for front end application where I'm registering main.js & another view is for back office where I'm registering main.bo.js.
When the application is loading I'm getting 404 for all the html pages & css.
Tried many options but not able to resolve the issue. Any help will be appreciated.
Error Details
I'm using custom webpack because I need 2 entry point main.js and main.bo.bundle.js. Based on the creds I'm registering either main.js or main.bundle.bo in my mvc application.
This is how I'm registering script from MVC view.
Scripts
Wepback.config.js
"use strict";
const path = require('path');
const webpack = reiuire('webpack');
const CssMinimizer = require('css-minimizer-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
mode: "development", // "production" | "development" | "none"
entry: {
//'polyfills': './angular/src/polyfills.ts',
'vendor': './angular/src/vendor.ts',
'app': './angular/src/main.ts',
'bo': './angular/src/main.bo.ts'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].bundle.js',
libraryTarget: 'umd',
clean: true
},
module: {
rules: [
{
test: /\.m?js$/,
use: {
loader: 'babel-loader',
options: {
plugins: ['#angular/compiler-cli/linker/babel'],
compact: false,
cacheDirectory: true,
}
}
},
{
test: /src\/.*\.js$/,
use: [
{
loader: 'babel-loader',
options: {
sourceMaps: false,
cacheDirectory: true,
cacheCompression: false
}
},
...(
[{ loader: 'source-map-loader' }]
)
],
exclude: [/(node_modules|bower_components)/]
},
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
onlyCompileBundledFiles: true
}
}
],
exclude: [/node_modules/, /test/]
},
{
test: /\.(html)$/,
use: 'html-loader'
},
{
test: /src\/app\/.*\.css$/,
use: [
'style-loader',
'css-loader'
]
},
]
},
resolve: {
extensions: ['.mjs', '.ts', '.js', '.css', '.html'],
fallback: {
crypto: "crypto-browserify",
http: "stream-http",
https: "https-browserify",
os: "os-browserify/browser",
path: "path-browserify",
stream: "stream-browserify",
process: "process/browser",
zlib: "browserify-zlib",
url: "url/",
},
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
devtool: 'source-map',
target: "web",
plugins: [
new webpack.ContextReplacementPlugin(
/\#angular(\\|\/)core(\\|\/)esm5/,
'./angular',
{}
),
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin(),
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
exclude: ['vendor.ts']
})
],
optimization: {
minimize: false,
minimizer: [
new TerserPlugin({
exclude: /assets/,
extractComments: false
})
]
}
}
Package.json
"devDependencies": {
"#angular-builders/custom-webpack": "^14.0.0",
"#angular-builders/dev-server": "^7.3.1",
"#angular-devkit/build-angular": "^14.0.0",
"#angular/cli": "^14.0.0",
"#angular/compiler-cli": "^14.0.0",
"#babel/plugin-proposal-decorators": "^7.18.9",
"#ngtools/webpack": "11.0.7",
"#types/jasmine": "~4.0.0",
"#types/jest": "^27.4.1",
"#webpack-cli/serve": "^1.6.1",
"babel-loader": "^8.2.5",
"css-loader": "^5.2.7",
"css-minimizer-webpack-plugin": "^4.0.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^6.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^5.5.0",
"jasmine-core": "~4.1.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-html-detailed-reporter": "^1.1.20",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "^2.6.1",
"phantomjs": "^1.9.19",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.3.3",
"to-string-loader": "^1.2.0",
"ts-loader": "^9.3.1",
"typescript": "~4.7.2",
"uglifyjs-webpack-plugin": "^1.1.2",
"url": "^0.11.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"#angular/animations": "^14.0.0",
"#angular/cdk": "^14.0.0",
"#angular/cli": "14.0.0",
"#angular/common": "^14.0.0",
"#angular/compiler": "^14.0.0",
"#angular/core": "^14.0.0",
"#angular/forms": "^14.0.0",
"#angular/material": "^14.0.0",
"#angular/platform-browser": "^14.0.0",
"#angular/platform-browser-dynamic": "^14.0.0",
"#angular/router": "^14.0.0",
"#babel/core": "^7.18.9",
"#babel/preset-env": "^7.18.9",
"#ng-idle/core": "^11.1.0",
"#ng-idle/keepalive": "^11.0.3",
"#types/node": "14.17.3",
"#types/webrtc": "^0.0.30",
"angular2-template-loader": "^0.6.2",
"assert": "^2.0.0",
"browserify-zlib": "^0.2.0",
"canvg": "^3.0.7",
"classlist.js": "^1.1.20150312",
"codelyzer": "^0.0.28",
"core-js": "^3.23.5",
"crypto-browserify": "^3.12.0",
"enhanced-resolve": "3.3.0",
"font-awesome": "^4.7.0",
"html2canvas": "1.0.0-alpha.9",
"https-browserify": "^1.0.0",
"ie-shim": "^0.1.0",
"jspdf": "^2.4.0",
"ng2-material-dropdown": "^0.11.0",
"ng2-pdf-viewer": "^3.0.8",
"ngx-bootstrap": "^6.2.0",
"ngx-toastr": "^14.2.1",
"node": "^18.5.0",
"node-fetch": "^2.6.1",
"oidc-client": "^1.10.1",
"os-browserify": "^0.3.0",
"pdfjs-dist": "^2.14.305",
"primeng": "^14.0.0-rc.1",
"rxjs": "~7.5.0",
"rxjs-compat": "^6.6.7",
"rxjs-tslint": "^0.1.8",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"tsconfig-paths-webpack-plugin": "^4.0.0",
"tslib": "^2.3.0",
"typescript-base64-arraybuffer": "^0.1.0",
"web-animations-js": "^2.3.1",
"yarn": "^1.22.17",
"zone.js": "^0.10.3"
},
"-vs-binding": {
"ProjectOpened": [
"test"
]
},
"browser": {
"zlib": false
}
TSConfig -
{
"compileOnSave": false,
"buildOnSave": false,
"compilerOptions": {
"baseUrl": "./",
// "outDir": "./dist",
// "forceConsistentCasingInFileNames": false,
"strict": false,
//"noImplicitOverride": true,
//"noPropertyAccessFromIndexSignature": true,
//"noImplicitReturns": false,
"noImplicitAny": false,
"strictPropertyInitialization": false,
//"noFallthroughCasesInSwitch": true,
"strictNullChecks": false,
"sourceMap": true,
"declaration": false,
//"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
//"importHelpers": true,
"target": "es5",
"module": "esnext",
"lib": [
"ES6",
"dom"
],
"paths" : {
"crypto": ["./node_modules/crypto-browserify"],
"stream": ["./node_modules/stream-browserify"],
"assert": ["./node_modules/assert"],
"http": ["./node_modules/stream-http"],
"https": ["./node_modules/https-browserify"],
"os": ["./node_modules/os-browserify"],
"zlib": ["./node_modules/browserify-zlib"]
},
},
"angularCompilerOptions": {
"compilationMode": "partial"
}
}
Index.html file from dist folder.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="vendor.bundle.js"></script><script defer src="app.bundle.js"></script><script defer src="bo.bundle.js"></script></head>
<body>
</body>
</html>