Angular模块中如何实现构建阶段的组件条件导入？

你在declarations里写三元表达式本身是符合TS语法的，Angular也能识别表达式的计算结果，但代码存在两个硬伤，完全达不到构建阶段条件加载的预期：

1. 模板硬编码冲突：HomeComponent模板里同时写了<AboutUsAComponent>和<AboutUsBComponent>两个标签，Angular编译模板时会校验所有模板中用到的组件是否都在当前模块声明，只要有一个没声明就直接抛编译错误，和你在declarations里选了哪个组件没有关系。
2. 无法实现构建时剔除：你写的const isAboutusA = true是运行时层面的常量，两个组件的静态import语句不会因为这个条件判断就不被加载，构建时两个组件都会被打进最终产物，完全不符合你“构建阶段选组件、排除冗余”的核心需求。

用Angular CLI原生提供的fileReplacements（文件替换）能力实现，这个能力是在构建打包阶段直接完成文件替换，没被引用的组件会被tree-shaking完全剔除，不会出现在最终产物里，也不需要运行时做任何渲染判断。

具体实现步骤 #

• 第一步：统一组件对外标识
  把AboutUsAComponent和AboutUsBComponent的selector统一改成同一个值，比如app-about-us，这样模板里不需要写条件判断，直接用同一个标签就能适配两个版本的组件。
  两个组件的@Component装饰器修改后示例：

// AboutUsAComponent
@Component({
  selector: 'app-about-us', // 和B组件保持一致
  template: '<div>This is the AboutUs A Component </div>',
  styles: [':host {color: blue}']
})
export class AboutUsAComponent {}

// AboutUsBComponent
@Component({
  selector: 'app-about-us', // 和A组件保持一致
  template: '<div>This is the About Us B Component </div>',
  styles: [':host {color: blue}']
})
export class AboutUsBComponent {}

• 第二步：新增两个版本的导出入口文件
  在home目录下新建两个文件，分别作为两个版本组件的导出入口：
  第一个是about-us-a.ts：

export { AboutUsAComponent as AboutUsComponent } from './about-us-A.component';

第二个是about-us-b.ts：

export { AboutUsBComponent as AboutUsComponent } from './about-us-B.component';

再新增一个默认的入口文件about-us.ts，内容和默认开发环境需要加载的组件入口保持一致即可。

• 第三步：配置构建时文件替换规则
  打开项目根目录的angular.json，找到对应版本的构建配置项，在fileReplacements数组里添加替换规则。比如要打A版本的生产包，就加如下配置：

"configurations": {
  "production": {
    // 其他原有配置保持不变
    "fileReplacements": [
      // 原有环境文件替换规则保留，新增下面这条
      {
        "replace": "src/app/home/about-us.ts",
        "with": "src/app/home/about-us-a.ts"
      }
    ]
  },
  // 也可以单独新增B版本的构建配置，替换规则对应指向b的入口文件，打包时选择对应配置就能自动切换组件版本
  "production-b": {
    "fileReplacements": [
      {
        "replace": "src/app/home/about-us.ts",
        "with": "src/app/home/about-us-b.ts"
      }
    ]
  }
}

• 第四步：修改原有模块和组件代码
  首先修改Home.module.ts，去掉两个组件的直接导入，换成从统一入口导入，declarations里也不需要写三元判断：

import { CommonModule } from '@angular/common';  
import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component';
// 从统一入口导入，构建时会自动替换成对应版本的组件
import { AboutUsComponent } from './about-us';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// 补上你原有代码里漏导入的两个组件
import { CollectionHomeComponent } from './collection-home.component';
import { BlogSectionComponenet } from './blog-section.component';

@NgModule({
  declarations: [
    HomeComponent,
    CollectionHomeComponent,
    BlogSectionComponenet,
    AboutUsComponent
  ], 
  imports: [
    CommonModule,
    BrowserAnimationsModule
  ],
  providers: []
})
export class HomeModule { }

然后修改HomeComponent的模板，删掉原来同时写的两个组件标签，换成统一的selector标签：

import { Component } from '@angular/core';
@Component({
  template: `<div>This is the Home component
    <app-about-us></app-about-us>
  </div>`,
  styles: [':host {color: blue}']
})
export class HomeComponent {}

方案效果 #

• 整个组件选择过程完全在构建阶段完成，打包时只会把选中的版本打进产物，另一个组件因为没有被任何语句引用，会被完全剔除，没有冗余代码
• 不需要在运行时写*ngIf、动态组件加载之类的渲染判断，组件在模块加载阶段就已经是目标版本，完全符合“DOM插入前完成加载”的要求
• 不会出现模板编译报错，因为不管选哪个版本，组件selector都是统一的，模板和模块声明完全匹配

如果不想修改两个组件的原生selector，也可以在统一入口里配合动态组件挂载API实现，但统一selector是成本最低、最稳定的实现方式。

内容的提问来源于stack exchange，提问作者Ashwani kumar