Angular+Ngx-Template开发中'nb-card-header'未知元素错误求助

作为NGX-Template和Angular的新手，我最近在开发新的customer页面时踩了个坑——明明已经在CustomerModule里导入了NbCardModule和相关模块，但控制台一直报错说'nb-card-header' is not a known element。下面是我的代码和错误详情，以及我总结的解决指引，希望能帮到同样遇到这个问题的朋友。

我的代码片段 #

HTML模板（customer.component.html） #

<div *ngFor="let customer of values" class="col-md-12 col-lg-6 col-xxxl-6"> 
  <nb-card> 
    <nb-card-header>{{customer.name}}</nb-card-header> 
    <nb-card-body> 
      <p>Beautifull body</p> 
    </nb-card-body> 
    <nb-card-footer>Good customer</nb-card-footer> 
  </nb-card> 
</div>

（注：原代码末尾多了一个多余的</div>，建议清理掉，不过这不是导致错误的原因）

CustomerModule代码 #

import { ThemeModule } from '../../@theme/theme.module';
import { NbButtonModule, NbCardModule, NbProgressBarModule, NbTabsetModule, NbUserModule, NbIconModule, NbSelectModule, NbListModule, } from '@nebular/theme';
import { CustomerRoutingModule } from './customer-routing.module';
import { CustomerCardComponent } from './customer-card/customer-card.component';
import {CustomerComponent } from './customer.component';
@NgModule({
 imports: [
 NbButtonModule,
 NbCardModule,
 NbProgressBarModule,
 NbTabsetModule,
 NbUserModule,
 NbIconModule,
 NbSelectModule,
 NbListModule,
 ThemeModule,
 CustomerRoutingModule,
 ],
 declarations: [
 CustomerCardComponent,
 CustomerComponent
 ],
})
export class CustomerModule {}

CustomerComponent.ts代码 #

import { Component, OnInit } from '@angular/core';
import { Customer } from '../../@core/models/customer.model';
import { CustomerService } from '../../@core/services/customer.service'
@Component({
 selector: 'ngx-customer',
 templateUrl: './customer.component.html',
 styleUrls: ['./customer.component.scss']
})
export class CustomerComponent implements OnInit {
 public message: string;
 public values: any[];
 constructor(private customerService: CustomerService){}
 ngOnInit() {
 this.customerService.getAll<Customer[]>().subscribe((data: Customer[]) => this.values = data, error => () => {
 this.message = 'Error: Could not get the data from the service';
 }, () => {
 this.message = 'succes';
 });
 }
}

控制台错误信息 #

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'nb-card-header' is not a known element:

1. If 'nb-card-header' is an Angular component, then verify that it is part of this module.
2. If 'nb-card-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
   (" <div *ngFor="let customer of values" class="col-md-12 col-lg-6 col-xxxl-6"> [ERROR ->]{{customer.name}}

   Beautifull"): ng:///PagesModule/CustomerComponent.html@3:8

解决指引 #

我后来排查了几个方向，终于解决了问题，你可以按顺序试试：

• 重点检查模块归属关系：从错误信息里的ng:///PagesModule/CustomerComponent.html能看出来，你的CustomerComponent实际是归属于PagesModule的。如果是这种情况，要么在PagesModule里也导入NbCardModule，要么确保CustomerModule已经被正确导入到PagesModule的imports数组中。很多新手容易犯的错就是组件声明在子模块，但父模块没导入子模块，导致子模块的依赖没生效。
• 确认组件声明的正确性：检查PagesModule的declarations数组里有没有CustomerComponent，如果有的话，那你应该把它移到CustomerModule的declarations里（保持模块职责单一），然后在PagesModule里导入CustomerModule。
• 清理缓存重启服务：Angular的开发服务器有时候会缓存旧的模块信息，导致新导入的模块不生效。你可以试试执行ng serve --no-cache重启服务，或者干脆删除node_modules和package-lock.json，重新npm install后再启动。
• 版本兼容性排查：确保你的@nebular/theme版本和Angular核心包（@angular/core、@angular/common等）版本是兼容的。比如如果你的Angular是15版本，那nebular最好也用对应支持15的版本，版本不匹配也会导致组件无法被正确识别。

内容的提问来源于stack exchange，提问作者Bryan van Rijn