Как использовать один компонент в 2 разных модулях?

Для использования одного компонента в двух разных модулях в Angular, необходимо выполнить следующие шаги.

1. Создайте компонент, который вы хотите использовать в двух модулях. Допустим, это компонент с именем MyComponent.

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>My Component</h1>`
})
export class MyComponent {
  // ... код компонента
}

2. Определите exports в NgModule декораторе этого компонента в модуле, где он был создан (допустим, в модуле с именем MyModule).

import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';

@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent // экспортируем компонент в другие модули
  ]
})
export class MyModule {
  // ... код модуля
}

3. Импортируйте MyModule в другие модули, где вы хотите использовать MyComponent. Например, импортируем его в модуле с именем AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyModule } from './my.module';

@NgModule({
  imports: [
    BrowserModule,
    MyModule // импортируем MyModule
  ]
})
export class AppModule {
  // ... код модуля
}

4. Теперь компонент MyComponent доступен для использования в шаблонах других компонентов в модуле AppModule.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>App Component</h1>
    <app-my-component></app-my-component> <!-- используем MyComponent -->
  `
})
export class AppComponent {
  // ... код компонента
}

5. После этих шагов, если вы запустите приложение, то вы увидите, что компонент MyComponent будет отображаться в шаблоне компонента AppComponent.

Итак, вы использовали один компонент MyComponent в двух разных модулях MyModule и AppModule, просто импортировав MyModule в AppModule. Это даст вам возможность использовать MyComponent повторно и избегать дублирования кода.