延迟加载模块会挂起 angular 网络应用程序

Question

我确定我遗漏了一些非常简单的东西，但我花了几个小时在上面，但我无法弄明白。

在我的应用程序中-routing.module，我懒加载模块（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)
      },
    ]
  },

一切正常。

现在我想添加一个新模块。所以我添加这个：-

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

NewCampaign 基本上是空的:-

// 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>

这基本上会挂起应用程序（我认为它处于无限循环中），但控制台中没有任何内容。没有错误。过了一会儿 Chrome 说应用程序没有响应，我必须终止它。

我之前已经这样做过十几次（针对这个应用程序），而且效果很好。我不知道我搞砸了什么。任何提示将不胜感激。

Answer 1

您还需要为任何延迟加载模块定义路由。

您可以按照 the docs 中的示例进行操作。

关于您的问题，我认为这可以解决您的问题：

// 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 {
}

延迟加载模块会挂起 angular 网络应用程序

Lazy loading a module hangs the angular web app

lazy-loading

angular