Angular 2中能否创建同名的多个组件？UI版本迭代场景问询

嘿，这个场景太常见了——迭代UI版本时想兼容旧功能又不想大规模改代码，完全能理解！在Angular里，是可以拥有两个同名组件的，但核心是要用NgModule（模块）来做隔离，避免命名冲突。下面给你拆解具体怎么做：

1. 用不同的NgModule分别声明新旧组件 #

把旧版组件和新版组件分别放到独立的模块里，这样Angular会把它们当成不同模块下的独立实体。举个例子：

旧版UI模块

// legacy-ui.module.ts
import { NgModule } from '@angular/core';
import { ButtonComponent } from './button.legacy.component'; // 文件名加后缀区分

@NgModule({
  declarations: [ButtonComponent], // 声明旧版同名组件
  exports: [ButtonComponent] // 导出供其他模块使用
})
export class LegacyUIModule {}

新版UI模块

// v2-ui.module.ts
import { NgModule } from '@angular/core';
import { ButtonComponent } from './button.v2.component'; // 新版组件文件

@NgModule({
  declarations: [ButtonComponent], // 声明新版同名组件
  exports: [ButtonComponent]
})
export class V2UIModule {}

2. 使用时按需导入，必要时加别名 #

• 渐进式迁移场景：旧页面的对应模块导入LegacyUIModule，模板里用组件的selector就会渲染旧版；新页面导入V2UIModule，则会加载新版组件。
• 同时使用新旧组件（比如对比测试）：如果某个组件需要同时调用两者，导入时给组件起别名区分：

// 测试组件的.ts文件
import { ButtonComponent as LegacyButton } from '../legacy-ui/button.legacy.component';
import { ButtonComponent as V2Button } from '../v2-ui/button.v2.component';

@Component({
  selector: 'app-ui-test',
  template: `
    <h3>旧版按钮</h3>
    <app-legacy-button></app-legacy-button>
    <h3>新版按钮</h3>
    <app-v2-button></app-v2-button>
  `,
  declarations: [LegacyButton, V2Button]
})
export class UITestComponent {}

注意：如果两个组件的selector也完全相同，不能在同一个模板里同时使用，Angular会优先匹配第一个加载的组件，这种情况下只能通过模块隔离分别在不同页面使用。

3. 避坑提醒 #

• 禁止在同一个NgModule里声明两个同名组件，Angular会直接抛出错误，模块内的组件必须唯一。
• 建议给组件文件加区分后缀（比如.legacy、.v2），避免在文件系统中混淆。
• 迁移完成后，记得及时清理旧组件和旧模块，避免冗余代码。

这样操作下来，你就能无缝保留旧版UI的同时开发新版组件，不用一次性替换所有代码，非常适合渐进式的UI升级。

内容的提问来源于stack exchange，提问作者Bishesh Acharya