找不到“{模块名称}”的 NgModule 元数据中的错误

Question

I am using the following Version of CLI:

ngular CLI: 6.2.7
Node: 10.6.0
OS: darwin x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.7
@angular-devkit/build-angular     0.8.7
@angular-devkit/build-optimizer   0.8.7
@angular-devkit/build-webpack     0.8.7
@angular-devkit/core              0.8.7
@angular-devkit/schematics        0.8.7
@angular/cli                      6.2.7
@ngtools/webpack                  6.2.7
@schematics/angular               0.8.7
@schematics/update                0.8.7
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.16.4

I created a child ng Module with name char-routing.module.ts and when i tried to crate class its throwing error When i run the ng serve it Throw following Error:

ERROR in No NgModule metadata found for 'CharRoutingModule'.

I am using lazyloading of NgModule loadChildren: './add-character/add-character.component#CharRoutingModule' I am adding my source of my two file. I am not able to replicate the issue why this happen, I am new in angular so, I don't have much more idea about it. Code of char-routing.module.ts

import { NgModule } from '@angular/core';
import { AddCharacterComponent } from './add-character.component';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [RouterModule.forChild([
    {path: '', component: AddCharacterComponent}
  ])],
  declarations: [AddCharacterComponent]
})
    export class CharRoutingModule {

}

Code of add-character.component.ts

import { StarWarService } from './../star-war.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-add-character',
  templateUrl: './add-character.component.html',
  styleUrls: ['./add-character.component.css']
})
export class AddCharacterComponent implements OnInit {
  ablavelSide: {display: string, value: string}[] = [
    {display: 'None', value: ''},
    {display: 'Light', value: 'light'},
    {display: 'Dark', value: 'dark'}
  ];
  swService: StarWarService;
  constructor(serive: StarWarService) {
    this.swService = serive;
  }

  ngOnInit() {
  }

  onSubmit (form) {
    console.log(form);
    if (form.invalid) {
      return;
    }
    this.swService.addCharracter(form.value.name, form.value.side);
    form.reset();
  }
}

This is the code which i am using. Please help me.

Answer 1

You're supplying the wrong path to your CharRoutingModule file.

loadChildren: './add-character/add-character.component#CharRoutingModule'

should have been

loadChildren: './add-character/char-routing.module#CharRoutingModule'

Ideally though, there should be a CharModule that should be referenced in the loadChildren and then a CharRoutingModule that would contain the route config for CharModule