angularangular-routerangular-router-guards

Turn off Angular 5 routing


We are working on a SPA. In some situations, one part of it is rendered into another application (as part of the markup). In this situations, we don't want routing in our application because we could possibly "steal" it from the other application. Is it somehow possible, to "turn off" routing in Angular at all? Or ignoring unknown routes?

I tried

What is working is, to completely remove the RouteModule.forRoot(...)-Import - but of course in that case, the rest of the application is totally broken.

This is one try with the CanLoad-Guard:

const routes: Routes = [
    // ...
    { path: "", redirectTo: "home", pathMatch: "full" },
    { path: "**", redirectTo: "home" }
];

@NgModule({
    declarations: [],
    imports: [RouterModule.forRoot(routes, { useHash: true,     initialNavigation: false })],
    exports: [RouterModule],
    providers: [{
        provide: "DisableRouting",
        useValue: () => false
    }]
})
export class AppRoutingModule {
    constructor(@Inject("HEADER_RENDER_MODE") private headerRenderMode: boolean, private router: Router) {
        if (!headerRenderMode) {
            router.initialNavigation();
        } else {
            // we don't want routing at this point
            router.resetConfig([{
                    path: "**",
                    component: HomeComponent,
                    canLoad: ["DisableRouting"]
                }]);
        }
    }
}

Solution

  • I found a way... it's not really turning off, more like ignoring it. In the "turnOff-Mode" we just define a single wildcard-route to a component which is doing and rendering nothing at all.

    The Routing-Module:

    export class AppRoutingModule {
        constructor(@Inject("HEADER_RENDER_MODE") private headerRenderMode: boolean, private router: Router) {
            if (!headerRenderMode) {
                router.initialNavigation();
            } else {
                router.resetConfig([
                    { path: "**", component: LazyComponent }
                ]);
            }
        }
    }
    

    The lazy component:

    @Component({
        selector: "lazy",
        template: ""
    })
    export class LazyComponent {
    }