Angular/NX - Component is not a known element, but it is imported in the module

Viewed 51

I'm receiving the following error:

'apocaloot-building' is not a known element:

  1. 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.

1 Answers

The module importing the standalone component did not have its own component in a declarations array.

Solution:

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