Lazy loading a module hangs the angular web app

Question

I am sure I am missing something really simple, but I've spent hours on it and I can't figure it out.

In my app-routing.module, I am lazy loading modules (Angular 8):

{
    path: "console",
    component: LayoutComponent,
    canActivate: [AngularFireAuthGuard, ConsoleGuard],
    data: { authGuardPipe: redirectUnauthorizedToLogin },
    children: [
      {
        path: "",
        loadChildren: () => import("./dashboard/dashboard.module").then(mod => mod.DashboardModule),
        pathMatch: "full"
      },
      {
        path: "apps/inbox",
        loadChildren: () => import("./pages/apps/inbox/inbox.module").then(mod => mod.InboxModule),
      },
      {
        path: "contacts",
        loadChildren: () => import("../app/contacts/contacts.module").then(mod => mod.ContactsModule)
      },
    ]
  },

Everything works.

Now I want to add a new module. So I add this :-

{
  path: "campaigns",
  loadChildren: () =>
    import ("../app/campaigns/new-campaign/new-campaign.module").then(mod => mod.NewCampaignModule)
},

NewCampaign is basically empty :-

// new-campaign.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NewCampaignComponent } from './new-campaign.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [NewCampaignComponent],
  exports: [NewCampaignComponent]
})
export class NewCampaignModule {
}

// new-campaign.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "common-new-campaign",
  templateUrl: "./new-campaign.component.html",
  styleUrls: ["./new-campaign.component.scss"],
})
export class NewCampaignComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

<!-- new-campaign.component.html -->
<p>
  New Campaign
</p>

This basically hangs the app (I think it's in an infinite loop), but there's nothing in the console. No error. After a while Chrome says the application is not responding and I have to kill it.

I've done this a dozen times before (for this very app) and it just works. I can't figure out what I screwed up. Any hint will be greatly appreciated.

Andrei Gătej · Accepted Answer · 2019-09-17 20:11:41Z

2

You also need to define the routes for any lazy loaded module.

You can follow the example from the docs.

Referring to your problem, I think this would solve your problem:

// new-campaign.module.ts

/* ... */

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

const routes: Routes = [
 { path: '', component: NewCampaignComponent }
];

/* ... */

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [NewCampaignComponent],
  exports: [NewCampaignComponent]
})
export class NewCampaignModule {
}

answered Sep 17, 2019 at 20:11

Andrei Gătej

12.1k1 gold badge22 silver badges39 bronze badges

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

5 Comments

zee Over a year ago

Oh man, thank you so much! I can't believe I totally forgot about that step :-). I owe you big time!

Tarida George Over a year ago

It should be exports: [RouterModule] not exports: [NewCampaignComponent]

Andrei Gătej Over a year ago

@TaridaGeorge why?

Tarida George Over a year ago

To have the routes declared in the new-campaign.module.ts exported. i.e to make those routes available to the app.

Andrei Gătej Over a year ago

@TaridaGeorge Since this module is lazy-loaded, this won't be needed. That is enough because Router.forChild will simply export the ROUTES provider. This token is then obtained when resolving route navigations.

Collectives™ on Stack Overflow

Lazy loading a module hangs the angular web app

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related