0

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.

1
  • 1
    I think your loadChildren path is wrong. Try loadChildren: 'app/login-register/login-register.module#LoginRegisterModule' Commented Aug 22, 2018 at 5:55

3 Answers 3

1

Use fat arrow function, then you don't have to worry about path of the module

e.g.

{ path: 'lazymodule', loadChildren: () => LoginRegisterModule }

and your routerLink should be

<li><a routerLink="/lazymodule/signin" routerLinkActive="nav-link active">Sign In</a></li>
Sign up to request clarification or add additional context in comments.

Comments

0

Ng5-Lazy-loading-bug-cli-1.7.1 bug:

angular-cli1.7.1 have issue to laod lazy laoding in string

{ path: 'user-panel', loadChildren: './user-panel/user-panel.module#UserPanelModule', }, -> will give error some time.

to { path: 'user-panel', loadChildren: () => UserPanelModule, },

import {UserPanelModule} from '/path-of-module' in routing.ts make the lazy loading into preloader module-> load the module as component level - module as component.

Comments

0

Your route is incorrect . try this :

//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="lazymodule/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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.