CODEWITHSUNDEEP
angularangular-routerangular-router-guards
Daniel
Daniel

Reputation: 168

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

Upvotes: 3

Views: 6764

Answers (2)

saga
saga

Reputation: 31

Another solution, just disable the location change listener.

I have an application that runs angular.js and angular in the same page and they both want to manage the routing. But some modules needs ActivatedRoute to be injectable so i cannot simply remove the routing module from Angular.

  1. disable the initial route resolve of angular: set initialNavigation to disabled
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true,
    initialNavigation: 'disabled',
  })],
  exports: [RouterModule]
})
class SimpleEmptyRouteModule {
}
  1. disable the location change listener of angular
class AppModule {
  constructor(private router: Router) {
    // disable the location change listener
    this.router.setUpLocationChangeListener = function () {
    };
  }
}

Upvotes: 0

Daniel
Daniel

Reputation: 168

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

Upvotes: 2

Related Questions