Реализация AOT в angular 11 + Webpack 4 с использованием @ngtools/webpack

Я пытаюсь реализовать AOT в своем угловом проекте, который не поддерживает cli. Я немного поискал и обнаружил, что @ngtools/webpack — это то, что нужно. мой угловой — 11.0.4, Typescript — 4.0.5, веб-пакет — 4.44.2. Я установил @ngtools/webpack - 11.0.4.

мой tsconfig.aot.json -

{
"angularCompilerOptions": {
    "skipMetadataEmit" : true,
    "trace": true,
    "genDir": "aot/"
},
"angularOptions": {
    "annotationsAs": "decorators"
},
"compilerOptions": {
    "target": "es2015",
    "module": "es2020",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom", "es7", "es2017", "es2018", "es2019" ],
    // "noEmit": true,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "baseUrl": ".",
    "allowJs": true,
    "allowUnreachableCode": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "incremental": false,
    "resolveJsonModule": true,
    "outDir": "./out-tsc/app",
},
"exclude": [
    "node_modules",
    "aot/",
    "app/Content/js/embed/appBootstrap.ts"
]

}

Мой Webpack.config -

//dependencies
const path = require('path');
const webpack = require('webpack');
const { AngularCompilerPlugin } = require('@ngtools/webpack');

//paths
const portalPath = path.join(__dirname, 'app');
const portalContentPath = path.join(portalPath, 'Content');
const webpackScriptPath = path.join(portalContentPath, 'js');
const nodeModulesPath = path.join(__dirname, 'node_modules');
const vbNodeModulesPath = path.join(nodeModulesPath, '@vb');
const outputPath = path.join(portalPath, 'dist');

//entry points
const entries = {
    embed: path.join(webpackScriptPath, 'embed', 'EmbedBootstrap.ts')
};

module.exports = {
    mode: 'production',
    entry: entries,
    output: {
        path: outputPath,
        filename: '[name].js',
        publicPath: '/dist/',
        sourceMapFilename: '[file].map'
    },
    module: {
        rules: [
            {
                test: /(\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                use: [
                    '@ngtools/webpack'
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader:'html-loader',
                        options: {
                            minimize: {
                                caseSensitive: true,
                                keepClosingSlash: true,
                                removeAttributeQuotes: false
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new AngularCompilerPlugin({
            tsConfigPath: path.join(__dirname, 'tsconfig.aot.json'),
            sourceMap: true,
            skipCodeGeneration: true, // AOT toggle
            mainPath: path.join(webpackScriptPath, 'embed', 'appBootstrap.ts'),
            entryModule: path.join(webpackScriptPath, 'embed', 'App.Module#AppModule')
        }),
        ...Object.values(entries).map(entryPath => new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)fesm2015/, entryPath))
    ],
    resolve: {
        modules: [
            'node_modules',
            vbNodeModulesPath,
            path.join(vbNodeModulesPath, 'vb-player', 'node_modules', '@vb')
        ],
        extensions: ['.tsx', '.ts', '.js']
    }
};

приложениеBootstrap.ts

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
 // This file not getting generated and giving compilation error
import { AppModuleNgFactory } from './App.Module.ngfactory';
enableProdMode();

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

App.Module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './App.Component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent
    ],
    imports: [
        CommonModule,
        FormsModule
    ]
})
export class AppModule {}

Я использую команду ниже для запуска webpack.min.config (я добавил ее в свой package.json и использую сборку npm run)

node --max_old_space_size=4096 node_modules/webpack/bin/webpack --config ./webpack.config.min.js

Ошибка, которую я получаю: -

Module not found: Error: Can't resolve './App.Module.ngfactory'.

Я не уверен, в какой папке будет создан файл ngfactory. Я не смог найти какой-либо надежный документ по реализации для последней версии @ngtools/webpack.

Я также попытался загрузить свой AppModule с помощью platformBrowserDynamic(), а не с помощью ngFactory. В этом случае я получаю сообщение об ошибке

Module parse failed: Unexpected character '@' (41:0)
> @NgModule({
|       bootstrap: [AppComponent],
|       declarations: [
 @ ./App.Module.ts

Я пытался поиграть с параметрами в tsconfig, но безуспешно. Любая помощь будет высоко оценена. Заранее большое спасибо.