Unable to redirect to Lazy Loaded module as default route/url on server start up

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

Edit: Since Angular 8, the way to lazy load modules is using dynamic imports such as:

 export const appRoutes:Routes = [
    { path: 'user', loadChildren:  () => import('path-to-module').then(m => m.UserModule)},  
    { path: '', redirectTo: 'user', pathMatch: 'full'}
]

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

In case your user has a home component, this trick worked for me :

app.routes.ts

export const appRoutes:Routes = [
  { path: '', redirectTo: 'user', pathMatch: 'full' }
  { path: 'user', loadChildren: () => import('path-to-module').then(m => m.UserModule) }
]

user.routes.ts

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