¿Qué debo hacer si el componente 'MyComponentComponent' es declarado por más de un NgModule cuando el mismo componente se introduce en varias páginas en Angular?

Un día, escribí myComponent, un componente personalizado seguro de mí mismo, lo importé y lo usé en varias páginas, y la consola me dio esto

Me he quitado los pantalones. ¿Qué quieres decir con esta indirecta?

Una mirada más cercana al componente 'MyComponentComponent' es declarado por más de un NgModule

¿que demonios? Digamos que mi componente es utilizado por varios módulos. ¡Qué estás haciendo, solo quiero usar varias páginas! ! !

Por lo general, el error anterior se produce debido al uso de enrutamiento de carga diferida (similar al siguiente)

const routes: Routes = [

...

  {
    path: 'first',
    loadChildren: () => import('./com/first/first.module').then(m => m.FirstModule),//异步加载、惰性加载、懒加载
  }, 

...

]

Así que revisé la documentación oficial y encontré un material shared.module.ts

Primero busque una carpeta limpia y cree una

módulo.compartido.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MyComponentComponent } from 'src/app/my-component/my-component.component';

// 这里加入自定义公共组件----------------------------------------
let declarations = [
  MyComponentComponent,
];

@NgModule({
  imports: [CommonModule,], //公共组件依赖的第三方组件可以在此处引入
  declarations,
  exports: declarations,
})
export class SharedModule { }

Vaya a la página Archivo de módulo que necesita usar los componentes públicos relevantes

primer.módulo.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../../shared.module';
import { FirstComponent } from './first.component';

@NgModule({
  imports: [
    SharedModule,//这里引入公共组件模块（共享特性模块）
    RouterModule.forChild([{ path: '', component: FirstComponent }]),//这句不加不会生效
  ],
  declarations: [FirstComponent,]
})
export class FirstModule { }

primer.componente.html

first
<app-my-component></app-my-component>

segundo.módulo.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../../shared.module';
import { SecondComponent } from './second.component';

@NgModule({
  imports: [
    SharedModule,//这里引入公共组件模块（共享特性模块）
    RouterModule.forChild([{ path: '', component: SecondComponent }]),//这句不加不会生效
  ],
  declarations: [SecondComponent,]
})
export class SecondModule { }

segundo.componente.html

second
<app-my-component></app-my-component>

mi-componente.componente.html

<h1>我特么终于没报错啦！</h1>

 El enrutamiento se configura solo y puede acceder directamente a http://localhost:4200/first

Visite http://localhost:4200/segundo