Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable application loading/routing in Angular2

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?

like image 450
billias Avatar asked Sep 14 '16 18:09

billias


People also ask

How do I disable my routerLink?

When linkEnabled returns false , null will make routerLink to link to the current/active route. If routerLink links to the active route, the class which is specified in routerLinkActive will be applied. That will be is_disabled in this case. There we can specify, how the disabled routerLink should appear.

Which of the keys is used to lazy load modules in Angular routing?

To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items. module').

Why lazy loading in Angular?

Lazy loading is an approach to limit the modules that are loaded to the ones that the user currently needs. This can improve your application's performance and reduce the initial bundle size. By default, Angular uses eager loading to load modules.

What is PreloadAllModules?

PreloadAllModuleslinkProvides a preloading strategy that preloads all modules as quickly as possible. class PreloadAllModules implements PreloadingStrategy { preload(route: Route, fn: () => Observable<any>): Observable<any> }


1 Answers

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' }
like image 154
Poul Kruijt Avatar answered Oct 04 '22 14:10

Poul Kruijt