Styjun

Using the new angular lazy routing strategy, I'm expecting the following scenario to work, however, it always assumes the routes don't exist.

Taken that I have one sub-directory in my application, called /admin with various view I'd like to render, for example, /admin/settings, /admin/action-centre, etc.

Normally, the routing would be /admin/route, however, for my strategy, I don't want to move my routes into app-routing.module.ts, rather, contain the routes for /admin within the admin-routing.module.ts file.

Then, in app-routing.module.ts, I'm applying a fallback '**' to an error view, should the routes not be found.

If I remove the '**' fallback, the routes work, however, the app always assumes my routes don't exist, within admin, and fails.

admin-routing.module.ts

import NgModule from '@angular/core';
import Routes, RouterModule from '@angular/router';
import SettingsComponent from 'app/admin/settings/settings.component';

const routes: Routes = [
 
 path: 'settings',
 component: SettingsComponent,
 canActivate: [AuthRequiredGuard]
 
];

@NgModule(
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule]
)
export class AdminRoutingModule 

admin.module.ts

import NgModule from '@angular/core';
import AdminRoutingModule from './admin-routing.module';
import CommonModule from '@angular/common';
import SettingsComponent from './settings/settings.component';

@NgModule(
 declarations: [
 SettingsComponent
 ],
 imports: [
 AdminRoutingModule,
 CommonModule,
 ],
 providers: [],
 entryComponents: [],
)
export class AdminModule 

app-routing.module.ts

import NgModule from '@angular/core';
import Routes, RouterModule from '@angular/router';
import AuthRequiredGuard from './guards/auth-required.guard';
import RouteManagerComponent from './route-manager/route-manager.component';
import ErrorsComponent from './errors/errors.component';

const routes: Routes = [
 
 path: '',
 redirectTo: 'redirect',
 pathMatch: 'full'
 ,
 
 path: 'redirect',
 component: RouteManagerComponent,
 canActivate: [AuthRequiredGuard]
 ,
 
 path: '**',
 component: ErrorsComponent
 
];

@NgModule(
 imports: [RouterModule.forRoot(routes,
 
 paramsInheritanceStrategy: 'always',
 enableTracing: true
 )],
 exports: [RouterModule]
)
export class AppRoutingModule 

app.module.ts

import BrowserModule from '@angular/platform-browser';
import NgModule, Injector, ErrorHandler from '@angular/core';
import HttpModule from '@angular/http';
import HttpClientModule, HTTP_INTERCEPTORS from '@angular/common/http';
import BrowserAnimationsModule from '@angular/platform-browser/animations';
import AppRoutingModule from './app-routing.module';
import AppComponent from './app.component';
import AppInjector from 'app/appinjector.module';
import AdminModule from 'app/admin/admin.module';
import HttpInterceptorModule from './interceptors/http-interceptor.module';
import AuthRequiredGuard from 'app/guards/auth-required.guard';
import ErrorsComponent from './errors/errors.component';
import CustomErrorHandler from './custom-error-handler';

@NgModule(
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 BrowserAnimationsModule,
 HttpClientModule,
 HttpModule,
 AppRoutingModule,
 AdminModule
 ],
 providers: [
 AuthRequiredGuard,
 
 provide: ErrorHandler,
 useClass: CustomErrorHandler
 
 ],
 bootstrap: [AppComponent]
)
export class AppModule 
 constructor(injector: Injector) 
 AppInjector.setInjector(injector);