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?
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.
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').
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.
PreloadAllModuleslinkProvides a preloading strategy that preloads all modules as quickly as possible. class PreloadAllModules implements PreloadingStrategy { preload(route: Route, fn: () => Observable<any>): Observable<any> }
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' }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With