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

【问题标题】：Angular 8 routing Error No NgModule metadata foundAngular 8 路由错误未找到 NgModule 元数据
【发布时间】：2019-11-09 00:41:53
【问题描述】：

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

我收到了错误

错误：找不到“TaskTypeComponent”的 NgModule 元数据。

这是我的 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 { }

管理路由模块

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>

TaskTypeCOMponent 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 {

    }

}

TaskType组件 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 组件并导航到它时，我收到上面的错误。如何使用第二个路由模块延迟加载管理组件及其子组件？

【问题讨论】：

在 loadChilren 中加载 TaskType 模块而不是组件。
对不起，我对那个说法有点困惑，你是什么意思？
错误：找不到“TaskTypeComponent”的 NgModule 元数据。您的错误清楚地表明您在AdminRoutingModule 中尝试的任务类型路由是加载组件，而不是您需要加载其中TaskTypeComponent 加载的模块，就像您的/admin
@GaurangDhorda 谢谢，那行得通。我想我误解了延迟加载组件。如果你把它放在一个答案中，我会接受它。
欢迎我有同样的答案。

标签： angular angular-routing

【解决方案1】：

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

你在这个 admin.routing.module 的 loadChildren() 中的错误

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

替换为，在 loadChilren 中加载 TaskType 模块而不是组件

【讨论】：