Angular 错误NG8001:&x27；新西兰布局'；不是已知元素

我从NG-ZORRO复制的每一样东西，我也导入了NgZorroAntdModule，但是当我试图构建项目时，我遇到了这个错误

pages/welcome/welcome.component.ts:8:5中出错-错误NG8001:“nz布局”不是已知元素：

如果“nz布局”是一个角度组件，则确认它是该模块的一部分

如果“nz layout”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息

下面是我的代码： 欢迎模块

import { NgModule } from '@angular/core';

import { WelcomeRoutingModule } from './welcome-routing.module';

import { WelcomeComponent } from './welcome.component';
import { FormsModule } from '@angular/forms';
import {CommonModule} from '@angular/common';
import {AppModule} from '../../app.module';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import {NzMenuModule} from 'ng-zorro-antd/menu';
import {NzBreadCrumbModule} from 'ng-zorro-antd/breadcrumb';
import {NgZorroAntdModule} from '../../ng-zorro-antd.module';


@NgModule({
  imports: [WelcomeRoutingModule,
    FormsModule,
    CommonModule,
    AppModule,
    NzLayoutModule,
    NzGridModule,
    NzMenuModule,
    NzBreadCrumbModule,
    NgZorroAntdModule],
  declarations: [WelcomeComponent],
  exports: [WelcomeComponent]
})
export class WelcomeModule { }


import { Component, OnInit } from '@angular/core';
import { components } from '../../model/componentMapping';


@Component({
  selector: 'app-welcome',
  template: `
    <nz-layout>
      <nz-header>
        <div class="logo"></div>
        <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
          <li nz-menu-item nzSelected>nav 1</li>
          <li nz-menu-item>nav 2</li>
          <li nz-menu-item>nav 3</li>
        </ul>
      </nz-header>
      <nz-layout>
        <nz-sider nzWidth="200px" nzTheme="light">
          <ul nz-menu nzMode="inline" class="sider-menu">
            <li nz-submenu nzOpen nzIcon="user" nzTitle="subnav 1">
              <ul>
                <li nz-menu-item nzSelected>option1</li>
                <li nz-menu-item>option2</li>
                <li nz-menu-item>option3</li>
                <li nz-menu-item>option4</li>
              </ul>
            </li>
            <li nz-submenu nzTitle="subnav 2" nzIcon="laptop">
              <ul>
                <li nz-menu-item>option5</li>
                <li nz-menu-item>option6</li>
                <li nz-menu-item>option7</li>
                <li nz-menu-item>option8</li>
              </ul>
            </li>
            <li nz-submenu nzTitle="subnav 3" nzIcon="notification">
              <ul>
                <li nz-menu-item>option9</li>
                <li nz-menu-item>option10</li>
                <li nz-menu-item>option11</li>
                <li nz-menu-item>option12</li>
              </ul>
            </li>
          </ul>
        </nz-sider>
        <nz-layout class="inner-layout">
          <nz-breadcrumb>
            <nz-breadcrumb-item>Home</nz-breadcrumb-item>
            <nz-breadcrumb-item>List</nz-breadcrumb-item>
            <nz-breadcrumb-item>App</nz-breadcrumb-item>
          </nz-breadcrumb>
          <nz-content>Content</nz-content>
        </nz-layout>
      </nz-layout>
    </nz-layout>
  `,
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
  isCollapsed = false;
  size64 = '64';
  size32 = '32';
  title = 'Welcome to use iTool Online';
  subTitle = '';
  routerPath = '';
  components = components;

  constructor() { }

  // tslint:disable-next-line:typedef
  ngOnInit() {
  }

}

这是我的结构

---

最后，我解决了这个问题。 这是因为路由配置应与loadChildren一起使用，而不是使用组件

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/login' },
  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
  { path: 'pages', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)}
];

以前是这样的，这是不正确的：

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/login' },
  { path: 'login', component: LoginComponent },
  { path: 'pages', component: PagesComponent }
];

---

你能展示一下NgZorroAntdModule是如何定义的吗？是的，下面是NgZorroAntdModule的定义对不起，我在主体部分添加了。我有同样的问题。请您详细说明一下为什么可以这样解决它？

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/login' },
  { path: 'login', component: LoginComponent },
  { path: 'pages', component: PagesComponent }
];