Angular: Lazy module loading does not work

Question

I try to achieve lazy module loading but I don't succeed yet.
I want when the user go to /admin - then the AdminModule will start,
and when the user go to /admin/user - then UserComponenet of AdminModule will start.

This is the folder structure of my app:

In my app I have AppModule:

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

const routes: Routes = [
  {path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
 ];

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

AppComponent html file:

--- App Componenet --- <br /><br />
<a routerLink="admin">admin</a><br />
<a routerLink="admin/home">admin/home</a><br />
<a routerLink="admin/user">admin/user</a><br />

<br /><br />
Router outlet result: <br />
<router-outlet></router-outlet>

AdminModule file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { UserComponent } from './user.component';

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'user', component: UserComponent },
    { path: '', component: HomeComponent }
];

@NgModule({
  declarations: [
    HomeComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forChild(routes)
  ]
})
export class AdminModule { }

HomeComponent html file:

Home Works!

UserComponent html file:

User Works!

What am I do wrong? Thanks.

Is this angular 8 or 9? by "then UserComponenet of AdminModule will start." you mean that the UserComponent will be downloaded to the browser? — Raz Ronen
– Raz Ronen, Commented May 5, 2020 at 19:36
see Manually Load Angular Component in here: mokkapps.de/blog/… — Raz Ronen
– Raz Ronen, Commented May 5, 2020 at 19:53
Do you want to lazy load user component only when the admin/user is activated? Then you may want to look at lazy load components. What you are doing is just a lazy loading of modules which will load all the components within the module when any of the admin routes is activated. — Amit Chigadani
– Amit Chigadani, Commented May 5, 2020 at 19:57

Radik · Accepted Answer · 2022-06-26 12:56:15Z

2

try to change AdminModule as follow

import CommonModule instead of BrowserModule

@NgModule({
  declarations: [
    HomeComponent,
    UserComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class AdminModule { }

example

edited Jun 26, 2022 at 12:56

answered May 5, 2020 at 19:48

Radik

2,7931 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Lazy module loading does not work

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related