将项目拆分为模块 - 一个模块不起作用

Question

我正在尝试将 angular 9 应用程序拆分为多个模块，以提高应用程序的性能（延迟加载等）。现在我已经创建了两个模块——博客和管理模块。我不知道为什么，但管理员 pages/components 不工作，在 URL 上启动 chrome 后我能看到所有内容： https://localhost:4200/admin is an empty page. Blog pages work without any problem, so I can go to https://localhost:4200/blog 并且一切正常。从我的角度来看，这两个模块的完成方式相同。你能告诉我我做错了什么吗？

应用-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./components/home/home.component";
import { NotFoundComponent } from "./components/not-found/not-found.component";

const routes: Routes = [
  { path: "", component: HomeComponent, pathMatch: "full" },
  {
    path: "admin",
    loadChildren: () => import("./admin/admin.module").then(x => x.AdminModule)
  },
  {
    path: "blog",
    loadChildren: () => import("./blog/blog.module").then(x => x.BlogModule)
  },
  { path: "**", component: NotFoundComponent }
];

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

博客-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { BlogComponent } from "./blog/blog.component";
import { BlogDetailsComponent } from "./blog-details/blog-details.component";

const routes: Routes = [
  { path: "", component: BlogComponent, pathMatch: "full" },
  { path: "blog/:id/:slug", component: BlogDetailsComponent }
];

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

blog.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { BlogComponent } from "./blog/blog.component";
import { BlogDetailsComponent } from "./blog-details/blog-details.component";
import { BlogNavbarComponent } from "./blog-navbar/blog-navbar.component";
import { BlogRoutingModule } from "./blog-routing.module";

@NgModule({
  imports: [CommonModule, BlogRoutingModule],
  declarations: [BlogComponent, BlogDetailsComponent, BlogNavbarComponent]
})
export class BlogModule {}

admin-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { Role } from "../models/Authentication/Role";
import { AdminLoginComponent } from "./admin-login/admin-login.component";
import { AdminDashboardComponent } from "./admin-dashboard/admin-dashboard.component";
import { AuthGuard } from "../auth.guard";
import { AdminFaqComponent } from "./admin-faq/admin-faq.component";
import { AdminFaqCreateComponent } from "./admin-faq-create/admin-faq-create.component";
import { AdminBlogComponent } from "./admin-blog/admin-blog.component";
import { AdminBlogCreateComponent } from "./admin-blog-create/admin-blog-create.component";

const routes: Routes = [
  { path: "", component: AdminLoginComponent, pathMatch: "full" },
  {
    path: "admin/dashboard",
    component: AdminDashboardComponent,
    canActivate: [AuthGuard],
    data: { roles: [Role.Admin] }
  },
  {
    path: "admin/faq",
    component: AdminFaqComponent,
    canActivate: [AuthGuard],
    data: { roles: [Role.Admin] }
  },
  {
    path: "admin/faq/create",
    component: AdminFaqCreateComponent,
    canActivate: [AuthGuard],
    data: { roles: [Role.Admin] }
  },
  {
    path: "admin/faq/update/:id",
    component: AdminFaqCreateComponent,
    canActivate: [AuthGuard],
    data: { roles: [Role.Admin] }
  },
  {
    path: "admin/blog",
    component: AdminBlogComponent,
    canActivate: [AuthGuard],
    data: { roles: [Role.Admin] }
  },
  {
    path: "admin/blog/create",
    component: AdminBlogCreateComponent,
    canActivate: [AuthGuard],
    data: { roles: [Role.Admin] }
  },
  {
    path: "admin/blog/update/:id",
    component: AdminBlogCreateComponent,
    canActivate: [AuthGuard],
    data: { roles: [Role.Admin] }
  }
];

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

admin.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { AdminBlogComponent } from "./admin-blog/admin-blog.component";
import { AdminBlogCreateComponent } from "./admin-blog-create/admin-blog-create.component";
import { AdminDashboardComponent } from "./admin-dashboard/admin-dashboard.component";
import { AdminFaqComponent } from "./admin-faq/admin-faq.component";
import { AdminFaqCreateComponent } from "./admin-faq-create/admin-faq-create.component";
import { AdminLoginComponent } from "./admin-login/admin-login.component";
import { AdminNavbarComponent } from "./admin-navbar/admin-navbar.component";
import { AdminRoutingModule } from "./admin-routing.module";

@NgModule({
  imports: [CommonModule, AdminRoutingModule],
  declarations: [
    AdminBlogComponent,
    AdminBlogCreateComponent,
    AdminDashboardComponent,
    AdminFaqComponent,
    AdminFaqCreateComponent,
    AdminLoginComponent,
    AdminNavbarComponent
  ]
})
export class AdminModule {}

控制台出现一些错误：

Answer 1

此错误仅表示您忘记在使用 ngModel

的模块中导入 FormsModule

将项目拆分为模块 - 一个模块不起作用

Splitting project into modules - one module don't work

typescript

angular-module

angular

angular9