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!

CodePudding user response：

If you are going to share components between 2 other modules, you should have a shared module for that component which would also contain similar/related components.

Since your alert component is used in more than one module, we will place it in its own module. This contains the following:

• declarations – this is to declare all components/directives/pipes/etc. that are in this module.
• exports – this is to expose specific components/directives/pipes/etc. to other modules, anything in declarations but not here will not be accessible by other modules.
• imports – this is everything this module needs to operate.

So, here is where we will define the AlertModule to be use in other modules:

@NgModule({
  // These are components that are apart of this module
  declarations: [AlertComponent, AlertHeaderComponent, AlertFooterComponent],
  // These are components that other modules can use/access from this module
  exports: [AlertComponent],
  // These are dependencies that this module needs in order to work
  imports: [CommonModule, ButtonModule]
})
export class AlertModule {}

Next we just need to import the module here:

@NgModule({
  imports: [CommonModule, AlertModule]
})
export class ModuleA {}

And any other module that wants to use the alert:

@NgModule({
  imports: [CommonModule, AlertModule]
})
export class ModuleB {}

CodePudding user response：

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 :)