Disable application loading/routing in Angular2

Question

I have an angular2 application (RC6 version), where some important global parameters are loaded from a configuration file using a service that collects this file on startup:

@NgModule({
imports:  [ BrowserModule, FormsModule, HttpModule, AppRoutes, SomeCustomModule ],
declarations: [ AppComponent ]
providers: [
            ConfigurationService,
            {
              provide: APP_INITIALIZER,
              useFactory: (config: ConfigurationService) => () => { 
                             return config.load().then(configParams=> { return true;});      
                          },
              deps: [ConfigurationService, HttpModule],
              multi: true
            }
          ],
bootstrap:[ AppComponent ]
})
export class AppModule { }

As shown in this snippet i use what i call a ConfigurationService which through an http call reads a configuration file and returns some parameters (as a Promise). If everything goes well, the application loads perfectly and these config parameters are accessible throughout the sub-modules etc.

The question is, how can i stop application from loading the sub-modules in case this configuration file does not load as expected? (Please note that the AppComponent is in essence just a router-outlet, redirecting to other routes, defined by multiple sub-modules). Can i "disable" or redirect to an error page instead of loading the module/component defined by the requested route?

In AppComponent check parameters. If they are as expected, let the app run else route to error page... — micronyks
– micronyks, Commented Sep 14, 2016 at 18:37
Yes, but where? The AppComponent template is just <router-outlet></router-outlet>. I tried to encapsulate it with an *ngIf but i receive an error "Error: Cannot find primary outlet to load ChildComponent" Do you mean to add an ngOnInit() function and perform the check inside it? — billias
– billias, Commented Sep 14, 2016 at 18:43

Poul Kruijt · Accepted Answer · 2019-04-30 06:33:02Z

10

To disable initial routing of the page, and let it handle depending on your ConfigurationService you have to set initialNavigation to false in your AppRoutes object:

export const AppRoutes = RouterModule.forRoot(ROUTES, {initialNavigation : false});

Within your ConfigurationService you then have to inject the router and use this to navigate depending on your configuration.

Another option is to use the canActivate routing hook. Within this hook you can inject the ConfigurationService and let it determine whether it could load this page or not.

update

For the latest version of angular, the false value for initialNavigation is deprectated, use 'disabled' instead:

{ initialNavigation : 'disabled' }

edited Apr 30, 2019 at 6:33

answered Sep 14, 2016 at 18:44

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

billias Over a year ago

Thanks, i was not aware of the {initialNavigation : false} option

Pankaj Parkar Over a year ago

+1 Just an awesome feature by awesome Angular team, Thanks for letting us know, any documentation/reference link..?

Poul Kruijt Over a year ago

@PankajParkar I've added a link to the api. I don't think it's in the documentation yet

Pankaj Parkar Over a year ago

@PierreDuc Thanks mate, it would be helpful to other as well :)

Collectives™ on Stack Overflow

Disable application loading/routing in Angular2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related