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......

CodePudding user response：

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.

CodePudding user response：

In this can I would suggest you follow SCAM (Single Component Angular Module) pattern.

SCAM -

• each component has its own NgModule
• wherever it is going to use a component, consumers of components have to import the newly created NgModule in their NgModule.
• It helps to isolate the component
• Step helps you to move forward toward Standalone Components

@NgModule({
  declarations: [ApiErrorMessageComponent],
  exports: [ApiErrorMessageComponent],
  import: [
    CommonModule,
    ...
  ],
})
export class ErrorMessageModule {

}

And when it comes to usage, import ErrorMessageModule in NgModule whichever place you wanted to use ApiErrorMessageComponent. Like here it would be imported in

1. imports of MyOtherModule
2. imports of AppModule