Ошибка маршрутизации Angular 8 Метаданные NgModule не найдены - PullRequest
Новая
       37

Ошибка маршрутизации Angular 8 Метаданные NgModule не найдены

0 голосов
/ 08 ноября 2019

Я пытаюсь создать еще один модуль маршрутизации и внедрить его в свое приложение. Я хотел бы использовать отложенную загрузку.

Я получаю ошибку

Ошибка: не найдено метаданных NgModule для 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>

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 {

    }

}

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>

Когда я перехожу на /admin, он работает. Когда я пытаюсь включить компонент task-type и перейти к нему, я получаю сообщение об ошибке выше. Как я могу лениво загрузить компонент администратора и его детей с этим вторым модулем маршрутизации?

1 Ответ

1 голос
/ 08 ноября 2019

Ошибка: не найдено метаданных NgModule для TaskTypeComponent. в вашей ошибке четко указано, что вы пытаетесь в AdminRoutingModule для маршрутизации по типу задачи загружать компонент, а вам нужно загрузить модуль, в который TaskTypeComponent загружается так же, как ваш / admin

Ваша ошибка в этом администраторе. loadChildren () * routing.module () 

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

замените это на, загрузите модуль TaskType в loadChilren, не являющийся компонентом

...