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.

Do you have the same error when trying to get directly to the localhost:port/user path ? user/login is not a defined route. — ibenjelloun
@ibenjelloun user/login is defined through the user at routes.ts which prepends and translated by angular once it loaded the child routes of the said module. — alvirbismonte
You did not export your RouterModule in the UserModule, right ? — ibenjelloun
Your routing architecture does not really make sense. Why are you lazy loading your UserModule, if it is the module you route to immediately from your root application on initialization? That certainly is not the use case for lazy loading. — Narm

Arindam Dawn Arindam Dawn · Accepted Answer · 2019-05-03T07:35:18

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.

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

3 Answers