Bug: Error: NG0909: Expected to not be in Angular Zone, but it is!
Levi-Montgomery opened this issue · comments
Bug report
What is the current behavior?
The current behavior is that I receive the error "Error: NG0909: Expected to not be in Angular Zone, but it is!" when importing MFEs in the host app. I think it has something to with wrapping it as a web component or perhaps the shared dependencies and also perhaps something to do with ngZone / zone.js
Steps to reproduce.
Minimal github repository to reproduce:
https://github.com/Levi-Montgomery/Webpack_Bug_Repro
What is the expected behavior?
Whatever causes this error shouldn't be there or perhaps the error should be suppressed if it's not an issue? Everything seems to work fine with the error. Ordinarily I would just ignore it, however, in my actual use case this error appears upon every refresh of the microfrontend, which makes it appear hundreds of times a second. For now I just override the error handler in angular and catch the error and do nothing, but that is not an ideal fix!
Other relevant information:
Node.js version: v21.7.3
angular-architects version: 16.0.4
Operating System: MacOS - latest
Additional tools: Angular
Please try to share your NgZone instance as shown here:
https://www.angulararchitects.io/en/blog/micro-frontends-with-modern-angular-part-2-multi-version-and-multi-framework-solutions-with-angular-elements-and-web-components/
That worked, thank you so much @manfredsteyer.
To any future googlers, the fix was to each MFE add:
declare global {
// eslint-disable-next-line no-var
var ngZone: NgZone;
}
...
(async () => {
const app = await createApplication({
providers: [
globalThis.ngZone ? { provide: NgZone, useValue: globalThis.ngZone } : [],
],
});
And to the shell app.component.ts, add
declare global {
// eslint-disable-next-line no-var
var ngZone: NgZone;
}
...
constructor() {
globalThis.ngZone = inject(NgZone);
}