Has anyone ever successfully bundled an Angular 13 application with Webpack 5?

Question

I am attempting to upgrade an old project from Angular v6 up to an Angular LTS version. I was moving up the versions and when I got to version 13, I had to upgrade Webpack from 4 to 5. I thought it would be easiest just to create a new basic Angular app and attempt to bundle it using Webpack before attempting my project. I am running into so many issues.

I think the main issue revolves around this: The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available

How do I asynchronously load this loader into my webpack.config?

I continue to get errors when I attempt to require the babel LinkerPlugin, I am using esModules not commonJS. I am also on nodejs 14.20.

Package.json

{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "scripts": {
    "path": "webpack-dev-server --version",
    "path2": "webpack --version",
    "ng": "ng",
    "start": "webpack-dev-server --open --config webpack.config.js --progress --port 8080",
    "build": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "test": "ng test",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "serve": "webpack serve"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-optimizer": "^0.1302.1",
    "@angular/animations": "~13.4.0",
    "@angular/common": "~13.4.0",
    "@angular/compiler": "~13.4.0",
    "@angular/core": "~13.4.0",
    "@angular/forms": "~13.4.0",
    "@angular/platform-browser": "~13.4.0",
    "@angular/platform-browser-dynamic": "~13.4.0",
    "@angular/router": "~13.4.0",
    "@ngtools/webpack": "^13.3.11",
    "@types/ws": "8.5.4",
    "html-loader": "^4.2.0",
    "rxjs": "~7.5.0",
    "tsimportlib": "^0.0.5",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.11",
    "@angular/cli": "~13.3.11",
    "@angular/compiler-cli": "~13.4.0",
    "@babel/core": "^7.22.9",
    "@babel/preset-env": "^7.22.9",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "@webpack-cli/generators": "^3.0.7",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "prettier": "^3.0.0",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
    "style-loader": "^2.0.0",
    "ts-loader": "^9.4.4",
    "typescript": "4.4.4",
    "webpack": "5.76.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "description": "My webpack project"
}

tsconfig.json

{
  "compileOnSave": false,
  "compilationMode": "partial",
  "compilerOptions": {
    "resolveJsonModule": false,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "importHelpers": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "files": ["src/main.ts", "src/polyfills.ts"]
}

webpack.config.js

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ngToolsWebpack = require('@ngtools/webpack');
const dynamicImport = require('tsimportlib');


  const isProduction = process.env.NODE_ENV == 'production';


  const config = {
    entry: {
      'polyfills': './src/polyfills.ts',
      'app': './src/main.ts',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: "[name].js"
    },
    devtool: "source-map",
    devServer: {
      open: true,
      host: 'localhost',
      historyApiFallback: true
    },
    plugins: [
      new ngToolsWebpack.AngularWebpackPlugin({
        tsConfigPath: './tsconfig.json'

        //  entryModule: helpers.root('src/app/app.module#AppModule'),
        //  sourceMap: false,
      }),

      new HtmlWebpackPlugin({
        template: './src/index.html',
        inject: 'body'
      }),

      // Add your plugins here
      // Learn more about plugins from https://webpack.js.org/configuration/plugins/
    ],
    module: {
      rules: [
        {
          test: /\.html$/,
          use: 'html-loader'
        },
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.s[ac]ss$/i,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
          type: 'asset',
        },
        {
          // Regular rule for all non-library files
          test: /\.[jt]sx?$/,
          exclude: /node_modules/,
          use: [
            {loader: 'babel-loader'}, // Optional
            {
              loader: '@ngtools/webpack', // Required
              options: {
                directTemplateLoading: false, // See https://www.npmjs.com/package/@ngtools/webpack
              }
            },
            {loader: '@angular-devkit/build-optimizer/webpack-loader'}, // Optional
          ]
        },

        // Add your rules for custom modules here
        // Learn more about loaders from https://webpack.js.org/loaders/
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
    },
  };

  module.exports = () => {

    if (isProduction) {
      config.mode = 'production';


    } else {
      config.mode = 'development';
    }
    return config;
};