Angular shared component is not displayed

February 13, 2023

I am using Angular 15 with angular universal.

My shared component:

import { Component } from '@angular/core;
@Component({
  selector: 'my-component',
  styles: [],
  template: `<div>Hi</div>`
})
export class MyComponent {}

My Shared module:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MyComponent } from './components/my-component.component';

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

My First Vitrine Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { VitrineComponent } from './vitrine.component';
import { SharedModule } from 'src/app/shared/shared.module';

const routes: Routes = [
  {
    path: '',
    component: VitrineComponent
  }
]

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    SharedModule
  ],
  exports: [
    RouterModule
  ]
})
export class VitrineModule { }

My vitrine.component.html

...
<my-component></my-component>

I am trying to make a shared component and reuse my logic. This is a demo example, actually, I will not provide static data as a shared component.
The "my-component" throws an error

1. If 'my-component' is an Angular component, then verify that it is part of this module.
2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

It works perfectly when I am trying to put this component inside the app-component and declare it inside the app module, but this is not the case. I want to use that shared component inside my vitrine module and display it inside my vitrine.component.html file.

>Solution :

Your VitrineComponent is not added to any module. Add it to VitrineModule declarations in order to use components from the SharedModule

@NgModule({
  declarations: [
    VitrineComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    SharedModule
  ],
  exports: [
    RouterModule
  ]
})
export class VitrineModule { }