Unable to redirect to Lazy Loaded module as defaul

Question

Good day folks,

I am having this issue in my Angular 2 application upon server startup (npm start).

I redirect the base route or base path to user/login which is a Lazy Loaded module but it throws an Cannot find module error. This always happens as I've said, during startup and editing the pathMatch argument from 'full' to 'prefix' and vice versa fixes the error and loads the route without error.

I hope you can help me with this.

Below is the program.

app/routes.ts

import { Routes } from '@angular/router';
import { AppComponent } from './app.component';

export const appRoutes:Routes = [
    { path: 'user', loadChildren:  'user/user.module#UserModule'},  
    { path: '', redirectTo: 'user/login', pathMatch: 'full'}
]

app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { appRoutes } from './routes';

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app/user/user.routes.ts

import { LoginComponent } from "./login.component";

export const userRoutes = [
    { path: 'login', component: LoginComponent }
]

app/user/user.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router";

import { userRoutes } from "./user.routes";
import { LoginComponent } from "./login.component";


@NgModule({
imports: [
    CommonModule,
    RouterModule.forChild(userRoutes)
],
declarations: [
    LoginComponent
],
providers: [UserAuthService]
})

export class UserModule {}

I hope I've provided enough information about my problem. If not, just let me know. Thank you.

EDIT:

I'm having the same error when I visit user/login upon startup.

Answer 1

The accepted answer is not the correct way to implement lazyLoading at all. This should be the routing mechanism:

app.routes.ts

export const appRoutes:Routes = [
{ path: 'user', loadChildren:  'user/user.module#UserModule'},  
{ path: '', redirectTo: 'user', pathMatch: 'full'}

]

user.routes.ts

export const userRoutes = [
 {
path: '',
children: [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginComponent
  }]

} ]

ibenjelloun's answer is correct. Since you mentioned somehow it doesn't seem to work for you, I have given an alternative way with child routes.

Answer 2

Try changing your user.module.ts like this :

@NgModule({
imports: [
    CommonModule,
    RouterModule.forChild(userRoutes)
],
declarations: [
    LoginComponent
],
exports: [RouterModule], // Add this line
providers: [UserAuthService]
})

export class UserModule {}

And routes.ts :

export const appRoutes:Routes = [
    { path: 'user', loadChildren:  'user/user.module#UserModule'},  
    { path: '', redirectTo: 'user', pathMatch: 'full'}
]

Also user.routes.ts :

export const userRoutes = [
    { path: '', redirectTo: 'login', pathMatch: 'full'},
    { path: 'login', component: LoginComponent }
]

Answer 3

The () => notation actually worked for me. Below is my code regarding how I fixed it just by editing my routes.ts file

app/routes.ts

import { UserModule } from './user/user.module';

export const appRoutes:Routes = [
  { path: 'user', loadChildren: () => UserModule},
  { path: 'login', component: LoginComponent},    
  { path: '', redirectTo: 'user/login', pathMatch: 'full'}
]