After updating all the front and backend frameworks in my .NET/ABP/Angular app, the Webpack bundle in the browser is missing some directories and files in Webpack/node_modules and Webpack/src/assets that were present prior to the updates (i.e. Webpack/node_modules/@angular/common and Webpack/src/assets/abp-web-resources are missing, among others). The app builds but page load errors out while executing appInitializerFactory() because objects used in the method that should be made available from the Webpack bundle are instead undefined/missing.
Framework updates:
- .NET 6.0 -> .NET 9.0
- Abp 7.2.1 -> 10.0.0
- Angular 13.x -> 19.1.4
The first error:
ERROR ReferenceError: abp is not defined
appInitializerFactory app.config.ts:443
providers app.config.ts:253
Angular
runInInjectionContext
runInitializers
bootstrap
_callAndReportToErrorHandler
bootstrap
invoke
onInvoke
invoke
run
run
bootstrap
internalCreateApplication
bootstrapApplication
_ref main.ts:15
If I remove all references to abp, I get problems with moment being undefined. If I remove references to moment, I instead get an error that @angular/common/locales can't be found. If I remove the references to that directory....
package.json:
{
"angular-cli": {},
"scripts": {
"ng": "ng",
"publish": "cross-env NODE_OPTIONS=--max-old-space-size=4096 ng build --output-hashing=all --configuration production",
"start": "ng serve --host 0.0.0.0 --port 4200",
"hmr": "ng serve --host 0.0.0.0 --port 4200 --hmr --disable-host-check",
"preinstall2": "npx npm-force-resolutions"
},
"dependencies": {
"@angular/animations": "^19.1.4",
"@angular/cdk": "^19.1.2",
"@angular/common": "^19.1.4",
"@angular/compiler": "^19.1.4",
"@angular/core": "^19.1.4",
"@angular/forms": "^19.1.4",
"@angular/platform-server": "^19.1.4",
"@angular/router": "^19.1.4",
"@microsoft/signalr": "^8.0.7",
"@primeng/themes": "^19.0.5",
"abp-ng2-module": "^12.0.0",
"abp-web-resources": "^6.0.1",
"angular2-counto": "^1.2.5",
"bootstrap": "^5.3.3",
"core-js": "^3.40.0",
"cross-env": "^7.0.3",
"jquery-ui": "1.13",
"js-cookie": "^2.2.0",
"json5": "^2.2.2",
"loader-utils": "^3.2.1",
"localforage": "^1.10.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.43",
"ngx-bootstrap": "^19.0.2",
"npm-force-resolutions": "^0.0.10",
"object-path": "^0.11.6",
"rxjs": "^7.8.1",
"ts-node": "~7.0.1",
"tslib": "^2.8.1",
"webpack": "^5.97.1",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.0.6",
"@angular/cli": "^19.0.6",
"@angular/compiler-cli": "^19.0.5",
"@angularclass/hmr": "^2.1.3",
"@angularclass/hmr-loader": "^3.0.4",
"ts-node": "~7.0.1",
"tslint": "^5.20.1",
"typescript": "^5.6.3"
}
}
angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"newProjectRoot": "projects",
"projects": {
"abp-zero-template": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/metronic",
"src/favicon.ico",
{
"glob": "abp.signalr-client.js",
"input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
"output": "/assets/abp"
}
],
"scripts": [
"node_modules/@microsoft/signalr/dist/browser/signalr.min.js",
"node_modules/localforage/dist/localforage.js",
"node_modules/moment/min/moment-with-locales.js",
"node_modules/moment-timezone/builds/moment-timezone-with-data.js",
"node_modules/push.js/bin/push.js",
"node_modules/quill/dist/quill.js",
"node_modules/sweetalert2/dist/sweetalert2.js",
"node_modules/cookieconsent/build/cookieconsent.min.js",
"src/assets/FreezeUI/freeze-ui.js",
"src/assets/abp-web-resources/abp.js",
"src/assets/abp-web-resources/abp.sweet-alert.js",
"src/assets/abp-web-resources/abp.notify.js",
"src/assets/abp-web-resources/abp.freeze-ui.js",
"node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js",
"src/assets/metronic/assets/vendors/base/vendors.bundle.js",
"src/assets/metronic/assets/demo/default/base/scripts.bundle.js",
"node_modules/jquery/dist/jquery.min.js",
"src/assets/calendar_scripts/jquery-ui.bundle.js",
"src/assets/calendar_scripts/fullcalendar.bundle.js",
"node_modules/pdfjs-dist/build/pdf.min.mjs",
"node_modules/pdfjs-dist/build/pdf.worker.min.mjs"
],
"aot": false,
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
},
"docker": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.docker.ts"
}
]
},
"local-external": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.local-external.ts"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "abp-zero-template:build",
"allowedHosts": ["all"],
"liveReload": false
},
"configurations": {
"hmr": {
"buildTarget": "abp-zero-template:build:hmr"
},
"docker": {
"buildTarget": "abp-zero-template:build:docker"
},
"local-external": {
"buildTarget": "abp-zero-template:build:local-external"
}
}
}
}
}
}
}
tsconfig.json:
{
"compilerOptions": {
"declaration": false,
"downlevelIteration": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"lib": [ "es6", "dom", "ES2022" ],
"mapRoot": "./",
"module": "commonjs",
"skipLibCheck": true,
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "ES2022",
"typeRoots": [
"../node_modules/@types"
],
"baseUrl": "./",
"paths": {
"@app/*": [ "./app/*" ],
"@shared/*": [ "./shared/*" ],
"@node_modules/*": [ "../node_modules/*" ],
"@metronic/*": [ "./assets/metronic/*" ]
}
},
"exclude": [
"../node_modules"
]
}
It breaks at the first instance of abp here. If I comment it out, it breaks in AppPreBootstrap.run(). If I remove those undefined objects, it breaks in registerLocales() in the callback, etc.
function appInitializerFactory(
injector: Injector,
platformLocation: PlatformLocation) {
return () => {
abp.ui.setBusy();
handleLogoutRequest(injector.get(AppAuthService));
return new Promise<boolean>((resolve, reject) => {
AppConsts.appBaseHref = getBaseHref(platformLocation);
let appBaseUrl = getDocumentOrigin() + AppConsts.appBaseHref;
AppPreBootstrap.run(appBaseUrl, () => {
let appSessionService: AppSessionService = injector.get(AppSessionService);
appSessionService.init().then((result) => {
registerLocales(resolve, reject);
},
(err) => {
abp.ui.clearBusy();
reject(err);
}
);
}, resolve, reject);
});
};
}
app.config.ts where appInitializerFactory is used:
export let appConfig: ApplicationConfig = {
providers: [
provideRouter(routes, withPreloading(PreloadAllModules)),
provideAppInitializer(() => {
const initializerFn = (appInitializerFactory)(inject(Injector), inject(PlatformLocation));
return initializerFn();
}),
{
provide: LOCALE_ID,
useFactory: getCurrentLanguage
},
provideHttpClient(withInterceptorsFromDi()),
{ provide: HTTP_INTERCEPTORS, useClass: AbpHttpInterceptor, multi: true },
{ provide: API_BASE_URL, useFactory: getRemoteServiceBaseUrl },
]
and main.ts where appConfig is passed to the bootstrap function:
const bootstrap = async (): Promise<ApplicationRef> => {
try {
return await bootstrapApplication(RootComponent, appConfig);
} catch (err) {
console.error(err);
throw err;
}
};
if (environment.hmr) {
if (module['hot']) {
hmrBootstrap(module, bootstrap); //HMR enabled bootstrap
}
} else {
bootstrap(); //Regular bootstrap
}
I'm not using a webpack config file. I've ensured that the correct node_modules and assets are present in my local file structure. I made sure that the necessary scripts are present in angular.json. I deleted .angular and cleared my npm cache. I've scoured the Angular update guides. I downloaded this template from aspnetboilerplate and compared the config files. Nothing stood out. I've tried different lib and target options in tsconfig. I've checked stackoverflow and Angular support forums. At this point I'm just making random guesses and hoping.