Angular Lazy Loading

Question

been having a little trouble recently with lazy loading. Now I'm not sure if this is supposed to be happening or not (and I've tried searching for the issue but I'm not even sure how to word it if I'm being honest).

So I do everything for setup of the lazy loaded module like you would usually do. Everything from making sure that the app routing module is setup correctly as so:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  { 
    path: 'home', 
    loadChildren: './shared/modules/homepage/homepage.module#HomepageModule' 
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then, making sure that everything is correctly setup with the lazy loaded module, in this case, the homepage module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

//~~~~ Important:
import { HomeMainComponent } from './components/home-main/home-main.component';

const homeRoutes: Routes = [
  { 
    path: '',
    component: HomeMainComponent, 
  }
]


@NgModule({
  declarations: [
    HomeMainComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes),
  ],
  exports: [
    HomeMainComponent 
  ]
})
export class HomepageModule { }

Now I have yet to do a redirect path for path: '', in the app router module, but for some reason at localhost:4200/ , it loads the home module. In Augury this is what I'm seeing currently:

Augury Routing Tree

Edit* snipped code of app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

//~~~~ Important:
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { FeaturesModule } from './features/features.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule,
    SharedModule,
    FeaturesModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Edit* What it looks like when I go to home route:

Edit* changed the homepage.module.ts router into it's own file to homepage-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeMainComponent } from './components/home-main/home-main.component';


const homeRoutes: Routes = [
  { 
    path: '', 
    component: HomeMainComponent,
  },
];

@NgModule({
    declarations: [
        HomeMainComponent,
    ],
    imports: [RouterModule.forChild(homeRoutes)],
    exports: [
        HomeMainComponent,
        RouterModule]
})
export class HomepageRoutingModule { }

I've done everything correctly from what I understand, and I've done this tons of times to know that there's something wrong here. Anyone have any ideas on what I'm missing? Thanks!

Solved**** : Turns out I was using app-routing.module and I should be using a routing module for Shared.module instead. So basically, get rid or app-routing.module and do everything that I did in there within the shared-routing.module and that will resolve the issue. Thanks, everyone for the help!

What Angular version are you on? The way you use lazy loaded routes changed somewhere around Angular 7/8, I don't remember the exact version. — Celsiuss
– Celsiuss, Commented Dec 9, 2019 at 18:20
I'm currently using 8 right now. attempted to use the new method to create a lazy loaded route and got the same issue. Brb gonna double check just in case. — 12jikan
– 12jikan, Commented Dec 9, 2019 at 18:23
I edit the answer, you should also export your RouterModule... — Rafael Lucini
– Rafael Lucini, Commented Dec 9, 2019 at 18:29
Do you really have a folder named shared in the same directory that your AppRoutingModule is defined in? — Reactgular
– Reactgular, Commented Dec 9, 2019 at 18:30
yeah just tried the new method for Angular 8 but still getting the same issue. The Router Tree still looks the same. — 12jikan
– 12jikan, Commented Dec 9, 2019 at 18:30

Rafael Lucini · Accepted Answer · 2019-12-09 18:29:13Z

3

The way of lazy loading changed in the newer versions, refactor the config of routes to:

const routes: Routes = [
  { 
    path: 'home', 
    loadChildren: () => import('./shared/modules/homepage/homepage.module').then(m => m.HomepageModule)
  },
];

And export the RouterModule in your HomeModule:

@NgModule({
  declarations: [
    HomeMainComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes),
  ],
  exports: [
    HomeMainComponent,
    RouterModule 
  ]
})
export class HomepageModule { }

edited Dec 9, 2019 at 18:29

answered Dec 9, 2019 at 18:22

Rafael Lucini

5993 silver badges14 bronze badges

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

7 Comments

12jikan Over a year ago

So just tried switching it to the newer method, but still getting the same routing issue. Could it be related to the router-outlet?

Rafael Lucini Over a year ago

Did you export the Router module as i mentioned?

12jikan Over a year ago

Yeah just exported the router module, issue is still the same.

12jikan Over a year ago

Also added a screen cap of the router tree when I go to the /home route, if that helps out at all

12jikan Over a year ago

Ended up figuring this out. since I'm using several modules (core, shared, features note still trying to figure how to use angular like this), I made the mistake of trying to lazy load the home.module from the app-routing.module... Basically from what I'm seeing in old examples that I've worked on in the past and also from different online sources, I would need to get rid of the app-routing.module and create a routing module for the shared.module and do everything there. Sorry for the headaches, and thanks for helping me out!!!

|

Collectives™ on Stack Overflow

Angular Lazy Loading

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related