Angular5应用部署至Tomcat时环境配置失效问题求助

我来帮你排查和解决这个问题，咱们一步步来：

1. 先确认构建命令是否真的生效了 #

首先，你用ng build --prod --environment={{ENV}}构建后，一定要检查dist目录下的编译产物，比如打开main.[hash].js（或相关runtime文件），搜索你的API端点地址，看看是不是对应你指定的{{ENV}}环境的地址，而不是本地环境的。

如果这里还是本地地址，说明你的构建命令没正确触发环境替换，大概率是angular.json（旧版本是.angular-cli.json）里的环境配置有问题：

• 打开angular.json，找到projects -> 你的项目名 -> architect -> build -> configurations节点
• 确认每个环境（比如prod、staging、dev）对应的fileReplacements是否正确，比如：

  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    // 其他配置...
  }
  

• 另外注意：Angular 6+之后，官方推荐用--configuration参数替代--environment，比如ng build --prod --configuration=staging，你可以试试这个命令，避免参数兼容问题。

2. 排查Tomcat的缓存和部署问题 #

如果构建产物里的环境配置是对的，但部署到Tomcat后还是加载本地配置，那大概率是缓存的问题：

• 清理浏览器缓存：用Ctrl+Shift+R或者Ctrl+F5强制刷新页面，避免浏览器加载旧的静态资源
• 清理Tomcat缓存：删除Tomcat安装目录下work/Catalina/localhost/你的应用名文件夹，以及temp目录下的文件，然后重启Tomcat
• 确认部署文件是否完全覆盖：确保你把dist目录下的所有文件都复制到Tomcat的webapps/你的应用名目录，替换掉旧的文件，不要只替换部分文件

3. 更灵活的部署时切换环境方案（推荐） #

如果想避免每次切换环境都重新构建，可以把环境配置做成动态加载的JSON文件，这样部署到Tomcat后，只需要修改这个JSON文件就能切换环境，不需要重新编译：

• 在src/assets目录下创建env-config.json文件，内容如下：

  {
    "apiEndpoint": "https://your-target-api.com/api"
  }
  

• 在Angular中创建一个服务来加载这个配置，比如env.service.ts：

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable({ providedIn: 'root' })
  export class EnvService {
    apiEndpoint: string;
  
    constructor(private http: HttpClient) {}
  
    loadConfig() {
      return this.http.get('/assets/env-config.json')
        .toPromise()
        .then((config: any) => {
          this.apiEndpoint = config.apiEndpoint;
        });
    }
  }
  

• 在app.module.ts的APP_INITIALIZER中配置这个服务，确保应用启动前加载配置：

  import { NgModule, APP_INITIALIZER } from '@angular/core';
  import { EnvService } from './env.service';
  
  function initializeApp(envService: EnvService) {
    return () => envService.loadConfig();
  }
  
  @NgModule({
    // 其他模块配置...
    providers: [
      EnvService,
      {
        provide: APP_INITIALIZER,
        useFactory: initializeApp,
        deps: [EnvService],
        multi: true
      }
    ]
  })
  export class AppModule { }
  

• 之后在你的服务中使用EnvService获取API地址，比如：

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { EnvService } from './env.service';
  
  @Injectable({ providedIn: 'root' })
  export class ApiService {
    constructor(private http: HttpClient, private envService: EnvService) {}
  
    getUsers() {
      return this.http.get(`${this.envService.apiEndpoint}/users`);
    }
  }
  

这样部署到Tomcat后，只需要修改webapps/你的应用名/assets/env-config.json文件，就能随时切换API端点，不需要重新构建应用。

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