Turn off Angular 5 routing

Question

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

router.resetConfig with an empty configuration > "Cannot match any route"-Error appeared.
using a CanActivate guard on a solely wildcard-route, which always returns false -> same problem
using a CanLoad-Guard on a solely wildcard-route -> this seems to work, when not using #-routing. But we are using #-routing and because of AOT I haven't found a way to switch the useHash-Value at runtime.

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"]
                }]);
        }
    }
}

score 2 · Accepted Answer · answered Dec 28 '17 at 15:45

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 {
}

Turn off Angular 5 routing

1 Answers1