Home Angular Components with @Input being used in a different module to which it is declared in

Questions

Angular Components with @Input being used in a different module to which it is declared in

July 27, 2022

I have the following component which has an @Input declared:

@Component({
  selector: 'app-api-error-message',
  templateUrl: './api-error-message.component.html',
  styleUrls: ['./api-error-message.component.scss'],
  inputs: ['ErrorMessages']
})

export class ApiErrorMessageComponent implements OnInit {

  @Input() ErrorMessages: ErrorMessage[];

  constructor(private router: Router, private _location: Location) { }

  ngOnInit(): void {
  }
}

This component is declared and exported in the app module:

@NgModule({
  declarations: [
    AppComponent,
    ApiErrorMessageComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    MyOtherModule
  ],
  exports: [
    ApiErrorMessageComponent
  ]
})
export class AppModule { }

I am trying to use the ApiErrorMessageComponent in a component declared in ‘MyOtherModule’.

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MyOtherRoutingModule
  ]
})
export class MyOtherModule { }

MyComponent.html:

<app-api-error-message [ErrorMessages]="errorData"></app-api-error-message>

But I get the following error message:

Compiled with problems:X

ERROR

MyComponent.component.html:2:3 - error NG8001: 'app-api-error-message' is not a known element:
1. If 'app-api-error-message' is an Angular component, then verify that it is part of this module.
2. If 'app-api-error-message' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2   <app-api-error-message [ErrorMessages]="errorData"></app-api-error-message>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  MyComponent.ts:9:16
    9   templateUrl: './MyComponent.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyComponent.


ERROR

MyComponent.component.html:2:26 - error NG8002: Can't bind to 'ErrorMessages' since it isn't a known property of 'app-api-error-message'.
1. If 'app-api-error-message' is an Angular component and it has 'ErrorMessages' input, then verify that it is part of this module.
2. If 'app-api-error-message' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

2   <app-api-error-message [ErrorMessages]="errorData"></app-api-error-message>
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  MyComponent.component.ts:9:16
    9   templateUrl: './MyComponent.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyComponent.

Any ideas what I am missing……

>Solution :

Notice the imports object of your MyOtherModule module only contains modules? You must add AppModule to the imports of MyOtherModule in order to use the components AppComponent exports inside of the MyOtherModule module.

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MyOtherRoutingModule,
    AppModule // IMPORTANT !!!!
  ]
})
export class MyOtherModule { }

Usually, in big applications you have a few modules corresponding to the natural modules of your respective application field. If a component needs to be shared between modules, it’s probably wise to create a CommonModule that is imported in all other modules.