Angular/NX独立组件在库模块中使用提示未知元素问题

错误信息 #

'apocaloot-building' 不是已知元素：

1. 如果 'apocaloot-building' 是Angular组件，请确认它已属于此模块。

问题背景 #

我开发了一个独立组件BuildingComponent，在应用的AppModule中导入后，能在app.html里正常使用。但在库模块BasecampModule中导入该组件后，模板里使用组件选择器时却弹出上述错误。虽然点击模块中的BuildingComponent能跳转到对应的组件文件，说明模块能识别该组件，但模板报错依旧。

相关代码 #

独立组件代码（路径：libs\components\src\lib\building\building.component.ts） #

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'apocaloot-building',
    standalone: true,
    imports: [CommonModule],
    templateUrl: './building.component.html',
    styleUrls: ['./building.component.scss'],
})
export class BuildingComponent implements OnInit {

    constructor () {
        console.log('constr');
    }

    ngOnInit () {
        console.log('init');
    }
    
}

库模块代码（路径：libs\features\basecamp\src\lib\basecamp.module.ts） #

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BuildingComponent } from '@apocaloot/components';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { BasecampRoutingModule } from './basecamp-routing.module';
import * as fromBasecamp from './+state/basecamp.reducer';
import { BasecampEffects } from './+state/basecamp.effects';
import { BasecampFacade } from './+state/basecamp.facade';

@NgModule({
    imports: [
        BasecampRoutingModule,
        CommonModule,
        BuildingComponent,
        StoreModule.forFeature(
            fromBasecamp.BASECAMP_FEATURE_KEY,
            fromBasecamp.basecampReducer
        ),
        EffectsModule.forFeature([BasecampEffects]),
    ],
    providers: [BasecampFacade],
})
export class BasecampModule {}

报错模板代码 #

<div class="page page--basecamp">
    <div class="page__content">
        Basecamp page content

        <apocaloot-building></apocaloot-building>
    </div>
</div>

解决方法 #

1. 检查库的公共导出配置
   如果是Monorepo环境（比如Nx），确保components库的public-api.ts正确导出BuildingComponent：

   // libs/components/src/public-api.ts
   export * from './lib/building/building.component';
   

   同时确认库的配置文件（如nx.json或package.json）中的导出路径无误。

2. 重启Angular语言服务
   VS Code的Angular语言服务可能缓存旧数据，通过命令面板（Ctrl+Shift+P）执行Angular: Restart Angular Language Service，刷新服务缓存。

3. 确认模板所属组件的导入
   如果使用组件的模板属于某个独立组件，需要在该独立组件的imports数组中添加BuildingComponent，而不是仅在模块中导入。若模板属于模块声明的组件，则确保模块已正确导入BuildingComponent。

4. 清理缓存并重新构建
   执行命令清除构建缓存并重新编译库和应用：

   # Angular CLI
   ng build components --clean
   ng serve apocaloot
   
   # Nx
   nx run components:build --clean
   nx serve apocaloot
   

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