Angular 8 路由错误未找到 NgModule 元数据

Question

我正在尝试创建另一个路由模块并在我的应用程序中实现它。我想使用延迟加载。

我遇到错误

Error: No NgModule metadata found for 'TaskTypeComponent'.

这是我的 AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpConfigInterceptor} from './services/shared/httpconfig.interceptor';
import { GanttModule } from './components/gantt/gantt.module'
import { ErrorDialogComponent } from './services/shared/errorHandling/errorDialogue.component'
import {MatIconModule} from '@angular/material/icon';
import {AdminModule} from './components/admin/admin.module';

@NgModule({
  declarations: [
    AppComponent,
    ErrorDialogComponent
    ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    GanttModule,
    MatIconModule,
    AdminModule    
  ],
  entryComponents: [
    ErrorDialogComponent
  ],
  exports: [

  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true }, 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的应用 AppRoutingModule

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GanttComponent } from './components/gantt/gantt.component';
import { AdminComponent} from './components/admin/admin.component';


const routes: Routes = [
  {path: 'gantt', component: GanttComponent},
  {path: 'admin', loadChildren: () => import('./components/admin/admin.module').then(m => m.AdminModule)}
];

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

这是管理模块

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import {AdminComponent} from './admin.component';
import {MatSidenavModule, MatListModule} from '@angular/material';
import {TaskTypeComponent} from './task-type/task-type.component';
import {AdminTemplateRoutingModule} from './admin.routing';

@NgModule({
  declarations: [
    AdminComponent,
    TaskTypeComponent
    ],
  imports: [
    AdminTemplateRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatSidenavModule, MatListModule  
  ],
  providers: [ 

  ],
  entryComponents: [

  ]
})
export class AdminModule { }

AdminRoutingModule

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { TaskTypeComponent} from './task-Type/task-type.component';

const routes: Routes = [
  { path: '', component: AdminComponent, children: [

    { path: 'task-type', 
    loadChildren: () => import("./task-Type/task-type.component").then(m => m.TaskTypeComponent)}    
  ] },

];

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

这是我的主要管理 HTML 组件

<mat-sidenav-container class="side-nav-container">
    <mat-sidenav class="nav-container" mode="side" opened>
        <h3>Admin</h3>
                <div>
                    <a routerLinkActive="sidenav-item-selected" routerLink="task-type">Task Types</a>
                </div>
    </mat-sidenav>
    <mat-sidenav-content class="sidenavContent">
        <router-outlet></router-outlet>
    </mat-sidenav-content>  
</mat-sidenav-container>

TaskType组件 TS 文件

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'task-type',
    templateUrl: './task-type.component.html',
    styleUrls: ['./task-type.component.css']
  })



export class TaskTypeComponent implements OnInit{

    constructor(){

    }

    ngOnInit(): void {

    }

}

任务类型组件HTML

<div class="page-banner h3"> Task Types</div>
    <div class="">
       <mat-list role="list">
          <mat-list-item role="listitem">Item 1</mat-list-item>
          <mat-list-item role="listitem">Item 2</mat-list-item>
          <mat-list-item role="listitem">Item 3</mat-list-item>
        </mat-list>
    </div>

当我导航到 /admin 时，它起作用了。当我尝试包含 task-type 组件并导航到它时，出现上述错误。我如何延迟加载管理组件及其第二个路由模块的子组件？

Answer 1

错误：未找到 'TaskTypeComponent' 的 NgModule 元数据。您的错误清楚地表明您在 AdminRoutingModule 中尝试的任务类型路由正在加载组件，而不是您需要加载其中 TaskTypeComponent 加载的模块，就像您的 /admin

你在这个 admin.routing.module`s loadChildren()

中的错误

loadChildren: () => import("./task-Type/task-type.component").then(m => m.TaskTypeComponent)}

将其替换为，在 loadChilren 而非组件中加载 TaskType 模块

Angular 8 路由错误未找到 NgModule 元数据

Angular 8 routing Error No NgModule metadata found

angular-routing

angular