0

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!

Ashalya
  • 1
  • 2
  • Try to import SharedModule in the module that administration-main.component.ts is declared. Maybe in app.module.ts – Samba Jun 29 '22 at 17:32
  • Is `AdministrationModule` itself imported by something? E.g `AppModule`. – Joosep Parts Jun 29 '22 at 18:26
  • Heya, thanks for your comments. The `AdministrationMainComponent` is declared in the `AdministrationModule`. There I imported the `SharedModule`. That would be the correct place, right? Also I just checked, the `AdministrationModule` is not imported anywhere else but in the `AppRoutingModule` for lazy loading: `path: "administration", loadChildren: () => import('./features/administration/administration-routing.module').then(m => m.AdministrationRoutingModule)` – Ashalya Jun 30 '22 at 08:45
  • I meant the `AdministrationRoutingModule` is used in the `AppRoutingModule`, I think it shouldn't have anything to do with it but I can add the code of both routingmodules here? – Ashalya Jun 30 '22 at 08:53

1 Answers1

0

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

It works now!

Ashalya
  • 1
  • 2