title: Lazy loading a module hangs the angular web app
body: <p>I am sure I am missing something really simple, but I've spent hours on it and I can't figure it out.</p>
  
  <p>In my app-routing.module, I am lazy loading modules (Angular 8):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
      path: "console",
      component: LayoutComponent,
      canActivate: [AngularFireAuthGuard, ConsoleGuard],
      data: { authGuardPipe: redirectUnauthorizedToLogin },
      children: [
        {
          path: "",
          loadChildren: () =&gt; import("./dashboard/dashboard.module").then(mod =&gt; mod.DashboardModule),
          pathMatch: "full"
        },
        {
          path: "apps/inbox",
          loadChildren: () =&gt; import("./pages/apps/inbox/inbox.module").then(mod =&gt; mod.InboxModule),
        },
        {
          path: "contacts",
          loadChildren: () =&gt; import("../app/contacts/contacts.module").then(mod =&gt; mod.ContactsModule)
        },
      ]
    },</code></pre>
  </div>
  </div>
  </p>
  
  <p>Everything works.  </p>
  
  <p>Now I want to add a new module. So I add this :-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    path: "campaigns",
    loadChildren: () =&gt;
      import ("../app/campaigns/new-campaign/new-campaign.module").then(mod =&gt; mod.NewCampaignModule)
  },</code></pre>
  </div>
  </div>
  </p>
  
  <p>NewCampaign is basically empty :-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 {
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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() {}
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- new-campaign.component.html --&gt;
  &lt;p&gt;
    New Campaign
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <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. </p>
  
  <p>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.  </p>