I'm receiving the following error:
'apocaloot-building' is not a known element:
- If 'apocaloot-building' is an Angular component, then verify that it is part of this module.
The component is a standalone component and I'm importing it into the module. I receive the error when I try and use the component in a library. I do not receive the error if I use the component in an app.
Standalone component: 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');
}
}
App module: apps\apocaloot\src\app\app.module.ts
If I import the component into app.module I am able to use the component in app.html without error.
Library module: 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 {}
Clicking on BuildingComponent does open the file, so I believe the module is aware of the component.
However, if I try and use the component in the template,
<div class="page page--basecamp">
<div class="page__content">
Basecamp page content
<apocaloot-building></apocaloot-building>
</div>
</div>
then I receive the error that apocaloot-building is not a known element.