'running karma, multiple ngModules with ngDoBootstrap results in Error: [ng:btstrpd] App already bootstrapped with this element
I have two apps, one is the "admin" app, and the other is the regular user facing app. So, I have two webpack entry point files, which both do:
# admin.ts
...
export default class AdminAppModule {
constructor (private upgrade: UpgradeModule) { }
ngDoBootstrap () {
this.upgrade.bootstrap(document.body, [
'AdminApp',
], { strictDi: true });
}
}
platformBrowserDynamic().bootstrapModule(AdminAppModule).then(platformRef => { ... });
# app.ts
...
export default class AppModule {
constructor (private upgrade: UpgradeModule) { }
ngDoBootstrap () {
this.upgrade.bootstrap(document.body, [
'App',
], { strictDi: true });
}
}
...
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
Everything works fine in the real world, when I visit the admin route, I see the admin app get bootstrapped, and when I go to the regular route, I see the app get bootstrapped--- but when I run karma specs, I am getting:
Chrome Headless 101.0.4951.41 (Mac OS 10.15.7) ERROR: 'ERROR', Error: [ng:btstrpd] App already bootstrapped with this element '<body class="ng-scope">'
Which is because karma is loading a file that imports both the app and admin entry point files:
import AppModule from 'entrypoints/app';
import AdminAppModule from 'entrypoints/admin_app';
...
beforeEach(angular.mock.module(createAngularJSTestingModule([AdminAppModule, AppModule])));
What is the proper way to prevent this error from happening?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|