I am trying to implement lazy loading and trying to lazy load sign in component but when sign in link is clicked i am getting exception 'Cannot match any route'.
//app.component.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Register / Login</a>
</div>
<ul class="nav navbar-nav">
<li><a routerLink="signin" routerLinkActive="nav-link active">Sign In</a></li>
<li><a>Sign Up</a></li>
<li><a routerLink="help" routerLinkActive="nav-link active">Help</a></li>
</ul>
</div>
</nav>
<div>
</div>
<router-outlet></router-outlet>
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'
import { AppComponent } from './app.component';
import { HelpComponent } from './help/help.component';
const route: Routes = [
{
path: '', component: HelpComponent
},
{
path: 'lazymodule', loadChildren: './login-register/login-register.module#LoginRegisterModule'
},
{
path: 'help', component: HelpComponent
}
];
@NgModule({
declarations: [
AppComponent,
HelpComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(route)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
//login-register.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SignInComponent } from './sign-in/sign-in.component';
import { FormsModule } from '../../../node_modules/@angular/forms';
import { Routes, RouterModule } from '../../../node_modules/@angular/router';
const route: Routes = [
{path: 'signin', component: SignInComponent}
]
@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule.forChild(route)
],
declarations: [SignInComponent]
})
export class LoginRegisterModule { }
signin component lies in app->login-register->sign-in folder. Please advice.
loadChildrenpath is wrong. TryloadChildren: 'app/login-register/login-register.module#LoginRegisterModule'