Modules and Angular Component is not a known element error

Question

I have a module like this:

// app.module.ts
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
...
],
  imports: [
    BrowserModule,
    SharedModule,
...
]
})
export class AppModule {}

And another module like this:

// shared.module.ts
@NgModule({
  declarations: [
    myComponent,
    myOtherComponent,
...
],
  imports: [
    OtherModule,
...
],
  exports: [
    myComponent,
    myOtherComponent,
...
})
export class SharedModule {}

In myComponent template I have something like this:

<div>
<my-other-component></my-other-component>
</div>

The application works perfectly, but in VSC I see the tag my-other-component like an error, that says `'my-other-component' is not a known element:

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

Usually when I got this error I just need to add MyOtherComponent to AppModule or SharedModule and it got fixed... but not this time. Why?

Thanks a lot!

I tried to add MyOtherComponent to AppComponent too, but on the browser I get another error that says: compiler.js:2175 Uncaught Error: Type MyOtherComponent is part of the declarations of 2 modules: SharedModule and AppModule!

Answer 1

you've exported myComponent and myOtherComponent from SharedModule and imported SharedModule again in the same file. remove SharedModule from the imports of sharedmodule.ts