Angular: Component's selector in SharedModule not working in feature module

Question

Hey everyone I'm struggling to find my error here. Hopefully you can help.

Issue: SideNavComponent is inside SharedModule, I want to access it in my administration-main template lilke this: <app-side-nav></app-side-nav>

What I've tried so far:

• Checking if the SharedModule declares the component: yes
• Checking if the component is exported in SharedModule: yes
• Checking the spelling of the selector in the component: yes
• Importing the SharedModule in my AdministrationModule: yes
• Restarting CLI&IDE: yes

Unfortunately it didn't help.

Angular version: 13.2.4 (I am also using mdbootstrap, therefore I need to use this version for now)

Here goes the Code:

side-nav.component.ts:

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

@Component({
  selector: 'app-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: ['./side-nav.component.scss']
})
export class SideNavComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

side-nav.component.html:

<p>side-nav works!</p>

shared.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SideNavComponent } from './components/side-nav/side-nav.component';



@NgModule({
  declarations: [
    SideNavComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    SideNavComponent
  ]
})
export class SharedModule { }

administration.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AdministrationRoutingModule } from './administration-routing.module';
import { AdministrationMainComponent } from './pages/administration-main/administration-main.component';
import { SharedModule } from 'src/app/shared/shared.module';


@NgModule({
  declarations: [
    AdministrationMainComponent,
  ],
  imports: [
    CommonModule,
    AdministrationRoutingModule,
    SharedModule
  ],
})  
export class AdministrationModule { }

administration-main.component.html:

<app-side-nav></app-side-nav>
<p>administration-main works!</p>

And the error message:

Error: src/app/features/administration/pages/administration-main/administration-main.component.html:1:1 - error NG8001: 'app-side-nav' is not a known element:
1. If 'app-side-nav' is an Angular component, then verify that it is part of this module.
2. If 'app-side-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <app-side-nav></app-side-nav>
  ~~~~~~~~~~~~~~

  src/app/features/administration/pages/administration-main/administration-main.component.ts:5:16
    5   templateUrl: './administration-main.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdministrationMainComponent.




× Failed to compile.

this is the folder structure

Thanks for your help!

Answer 1

Soo... A typo in the app-routing.module.ts was the issue. Accidentially imported the AdministrationRoutingModule instead of the AdministrationModule.

It works now!