How to include an Alert Component into two different modules in Angular?

Issue

I have to use the alert component into different modules A and B in Angular. Even if the implementation is the same for both modules, the tag is recognized as such only in module A. Module B returns in the webbrowser the error:

Uncaught Error: Template parse errors: 'alert' is not a known element:

1. If 'alert' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

The project structure is the following:

app
  _directives
    alert.component.html
    alert.component.scss
    alert.component.ts
    index.ts
  app.module.ts
  Module B
    moduleB.module.ts
    .
    .
  Module A
    moduleA.module.ts
    .
    .

The index.ts file exports the component:

export * from './alert.component';

In Module B (the working module) the component is imported as following: moduleB.module.ts

import { AlertComponent } from 'app/_directives/alert.component';
    .
    .
@NgModule({
  declarations: [
        .
        .
    AlertComponent,
        .
        .

The exactly same logic is used for module A where I get the error.

Do you have any ideas how to solve this? Thank you!

Solution

i will suppose that you know how to create and import modules.

So you need to :

• create a new module for the alert ( don't forget to export your component )
• import the alert module into Module_A , Module_B
• import only Module_A and Module_B into AppModule ( No need to import the alert component )

that's it :)

Answered By - Aouidane Med Amine