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

Question

I'm trying to create another routing module and implement it in my app. I would like to use lazy loading.

I am getting the error

Error: No NgModule metadata found for 'TaskTypeComponent'.

Here is my 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 { }

Here is my app 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 { }

Here is the Admin Module

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

This is my main Admin HTML component

<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 file

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 {

    }

}

TaskTypeCOmponent 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>

When I navigate to /admin it works. When I try to include the task-type component and navigate to it, I get the error above. How can I lazy load the admin component and it's children with this second routing module?

Answer 1

Error: No NgModule metadata found for 'TaskTypeComponent'. your error clearly states that what you are trying in AdminRoutingModule for task-type routing is loading component rather you need to load module of in which TaskTypeComponent loads just like your /admin

Your error in this admin.routing.module`s loadChildren()

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

replace this with, load TaskType module in loadChilren not component