无法在Angular自定义库中引入Angular Material的问题求助

这个错误看起来是Angular Material的问题，但其实核心原因很简单——你的库模块没有导入CommonModule！

*ngForOf（也就是我们常用的*ngFor）是Angular的通用结构指令，它属于CommonModule。在Angular应用的主模块（比如AppModule）里，我们导入的BrowserModule已经包含了CommonModule，所以这些指令能直接用；但对于通过ng generate library创建的库模块来说，它是独立的模块，不会自动引入CommonModule，必须显式导入才能使用*ngFor、*ngIf这类基础指令。

修复步骤： #

只需要在你的TabsModule中导入CommonModule即可，修改后的代码如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // 新增这行
import { TabsComponent } from './tabs.component';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';

@NgModule({
  declarations: [TabsComponent],
  imports: [
    CommonModule, // 加入到imports数组中
    MatTabsModule, 
    MatExpansionModule 
  ],
  exports: [ MatTabsModule, MatExpansionModule, TabsComponent ]
})
export class TabsModule { }

额外说明： #

• 不需要把CommonModule加到exports里，因为它是库内部组件需要依赖的基础模块，不需要暴露给使用这个库的外部模块。
• 你之前导入的MatTabsModule和MatExpansionModule是正确的，它们负责提供Angular Material的组件，只是缺少了通用指令的支持。

这样修改后，*ngFor就能正常在你的库组件模板中工作了，错误也会消失。

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