Разделение проекта на модули - один модуль не работает - PullRequest
Новая
       25

Разделение проекта на модули - один модуль не работает

0 голосов
/ 21 марта 2020

Я пытаюсь разделить приложение angular 9 на несколько модулей, чтобы повысить производительность приложения (lazy-loading et c). На данный момент я создал два модуля - блог и модуль администратора. Я не знаю почему, но страницы / компоненты администратора не работают, и все, что я вижу после запуска chrome по URL: https://localhost: 4200 / admin , это пустая страница. Страницы блога работают без проблем, поэтому я могу go до https://localhost: 4200 / blog и все работает правильно. Оба модуля сделаны одинаково с моей точки зрения. Не могли бы вы сказать мне, что я делаю здесь не так?

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

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

В консоли возникла ошибка:

console error

1 Ответ

2 голосов
/ 22 марта 2020

Эта ошибка просто означает, что вы забыли импортировать FormsModule в модуль, где вы используете ngModel

...