Question

我确定我确实缺少一些简单的东西，但是我已经花了数小时而无法弄清楚。

在我的app-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 Web应用程序

1 个答案: