Angular中ng-bootstrap popover嵌入HTML时出现ngbPopover未知属性错误求助

错误原因 #

该报错是Angular框架无法识别ngbPopover自定义指令导致，核心原因是你没有在使用该组件的对应作用域中导入Popover相关的依赖模块。

解决方案 #

1. 确认依赖安装完成 #

首先确认你已经按照要求安装了对应版本的ng-bootstrap，且项目中已经正确引入了Bootstrap样式文件。

2. 导入Popover模块 #

根据你的项目架构选择对应的导入方式：

方式一：NgModule架构

在使用popover的组件所属的NgModule的imports数组中引入NgbPopoverModule，示例如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入Popover独立模块
import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap/popover';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 加入到导入数组
    NgbPopoverModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

方式二：独立组件架构（Angular 14+）

如果你的项目使用的是独立组件（Standalone Component），直接在组件的元数据imports数组中添加即可：

import { Component } from '@angular/core';
import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap/popover';

@Component({
  selector: 'app-demo',
  standalone: true,
  // 导入Popover模块
  imports: [NgbPopoverModule],
  template: `
    <ng-template #popContent>This is a pop content!</ng-template>
    <ng-template #popTitle>Fancy <b>content!!</b></ng-template>
    <button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
      My button
    </button>
  `
})
export class DemoComponent {}

其他注意事项 #

• 你提供的示例代码中第一个ng-template里有多余的</b>闭合标签，建议删掉避免渲染异常
• 如果在子模块中使用该组件，需要在子模块的导入数组中添加NgbPopoverModule，或者在共享模块中导出该模块
• 确保你安装的ng-bootstrap版本和当前项目的Angular版本兼容，版本不匹配也可能导致指令识别失败

内容的提问来源于stack exchange，提问作者abc