基于环境变量动态加载Angular templateUrl的部署异常问题

Angular生产构建时默认会将组件HTML模板内联到JavaScript bundle中，不会保留单独的HTML文件。本地开发模式（ng serve）会实时处理组件路径，因此能正常加载；但打包后用http-server启动或部署到Azure时，代码中的相对路径会指向dist根目录，而对应的HTML文件并未被打包输出，从而出现404错误。

以下是三种可行解决方案，按推荐程度排序：

方案一：构建时静态切换模板（推荐） #

通过编译阶段的静态替换，确保只打包需要的模板文件，从根源避免运行时路径问题。

方法1：TypeScript条件编译 #

在组件代码中使用/*#__PURE__*/标记，让TypeScript编译时静态替换模板路径，构建工具会自动移除未使用的分支，仅打包选中的HTML文件：

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-user-view',
  // 条件编译静态替换路径
  templateUrl: /*#__PURE__*/ (environment.newUI ? './new-view.component.html' : './view.component.html'),
  styleUrls: ['./view.component.scss']
})
export class UserViewComponent {}

确保环境变量newUI在构建时是确定值（比如通过ng build --configuration=prod-newui指定不同环境配置）。

方法2：Angular构建配置替换文件 #

1. 在src/environments下创建多环境配置文件，例如environment.prod.newui.ts：

export const environment = {
  production: true,
  newUI: true
};

2. 在angular.json的projects.architect.build.configurations中新增构建配置，通过fileReplacements替换模板文件：

"configurations": {
  "prod": { ... },
  "prod-newui": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.newui.ts"
      },
      {
        "replace": "src/app/user-view/view.component.html",
        "with": "src/app/user-view/new-view.component.html"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    ...
  }
}

3. 构建时指定对应配置：ng build --configuration=prod-newui，组件的templateUrl固定为./view.component.html即可。

方案二：将模板文件配置为Assets #

若需运行时动态切换（不推荐，会打包冗余文件），可将两个HTML文件添加到Angular的assets配置，确保打包时输出到dist目录：

1. 修改angular.json的assets数组，添加模板文件路径：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/app/user-view/view.component.html",
  "src/app/user-view/new-view.component.html"
]

2. 调整组件中的templateUrl为相对于dist根目录的完整路径：

templateUrl: environment.newUI ? './app/user-view/new-view.component.html' : './app/user-view/view.component.html'

打包后两个HTML文件会被复制到dist对应目录，运行时可正常访问。

方案三：动态加载组件（适合运行时切换场景） #

将两个模板拆分为独立组件，通过Angular组件工厂动态加载，更符合组件化设计：

1. 创建两个独立组件：

// view.component.ts
@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.scss']
})
export class ViewComponent {}

// new-view.component.ts
@Component({
  selector: 'app-new-view',
  templateUrl: './new-view.component.html',
  styleUrls: ['./view.component.scss']
})
export class NewViewComponent {}

2. 修改原UserViewComponent为容器组件，动态加载目标组件：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { environment } from '../environments/environment';
import { ViewComponent } from './view.component';
import { NewViewComponent } from './new-view.component';

@Component({
  selector: 'app-user-view',
  template: `<ng-template #componentContainer></ng-template>`
})
export class UserViewComponent implements OnInit {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(private cfr: ComponentFactoryResolver) {}

  ngOnInit() {
    // 根据环境变量选择要加载的组件
    const targetComponent = environment.newUI ? NewViewComponent : ViewComponent;
    const componentFactory = this.cfr.resolveComponentFactory(targetComponent);
    this.container.createComponent(componentFactory);
  }
}

这种方式可按需加载组件，还能结合懒加载进一步优化打包体积。

内容的提问来源于stack exchange，提问作者Andrea Lucas