Skip to content

'Navigation triggered outside Angular zone' on bootstrapping #359

Description

@gabriel-gn

Hey there!
I am using @angular-architects/module-federation-tools@^16.0.4, but on bootstrapping I am receiving the following error on browser console:
projects_mfe_src_bootstrap_ts.js:1 Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

The project compiles normally on the browser and even the router works fine within the application, BUT external routing commands like: "location.back()", android back button or browser back button also trigger navigation outside angular zone.

below my webpack config:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

const mf = require('@angular-architects/module-federation/webpack');
const sharedMappings = new mf.SharedMappings();
const share = mf.share;

module.exports = {
    output: {
        publicPath: "auto",
        uniqueName: "jobs",
        scriptType: 'text/javascript'
    },
    optimization: {
        // Only needed to bypass a temporary bug
        runtimeChunk: false
    },
    plugins: [
        new ModuleFederationPlugin({

                // For remotes (please adjust)
                name: "jobs",
                filename: "remoteEntry.js",
                library: { type: "var", name: "jobs" },
                exposes: {'web-components': 'projects/mfe/src/bootstrap.ts'},

                shared: {...sharedMappings.getDescriptors()}
        }),
        sharedMappings.getPlugin(),
    ],
};

my bootstrap.ts:

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';
import {canStartServiceWorker} from './app/utils/service-worker-utils';

import { bootstrap } from '@angular-architects/module-federation-tools';

if (environment.production) {
    enableProdMode();
}

bootstrap(AppModule, {
    production: environment.production,
    appType: 'microfrontend',
    compilerOptions: {
        ngZone: (window as any).ngZone
    }
});

My app.module.ts

...
export class AppModule {
    constructor(
        private injector: Injector,
        private ngZone: NgZone,
        private router: Router
    ) {
        ngZone.run(() => {
            (window as any).ngZone = ngZone;
        });
    }

    ngDoBootstrap(): void {
        const ce = createCustomElement(AppComponent, {injector: this.injector});
        customElements.define('jobs-element', ce);
        this.router.setUpLocationChangeListener();
    }
}

Angular version: "@angular/cli": "16.1.4"

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions