I am trying implement AOT in my angular project which does not have cli support. I searched a bit and found @ngtools/webpack is the way to go. my angular is 11.0.4, Typescript is 4.0.5, webpack - 4.44.2. I installed @ngtools/webpack - 11.0.4.
my 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" ] }
My 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'] } }; appBootstrap.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 {} I am using below command to run webpack.min.config (I added it to my package.json and use npm run build)
node --max_old_space_size=4096 node_modules/webpack/bin/webpack --config ./webpack.config.min.js Error I am getting:-
Module not found: Error: Can't resolve './App.Module.ngfactory'. I am not sure in which folder ngfactory file will be generated. I could not find any kind of solid implementation document for latest version of @ngtools/webpack.
I also tried to bootstrap my AppModule using platformBrowserDynamic() rather than using ngFactory. In that case I get error saying
Module parse failed: Unexpected character '@' (41:0) > @NgModule({ | bootstrap: [AppComponent], | declarations: [ @ ./App.Module.ts I tried to play around with options in tsconfig but ended up with no luck. Any help would highly be appreciated. Thanks a lot in advance.
