Angular 14中如何在服务中获取angular.json里的publicHost值？

问题背景 #

我使用Angular 14，angular.json中的serve配置如下：

"serve": {
  "builder": "ngx-build-plus:dev-server",
  "configurations": {
    "production": {
      ...
    },
    "development": {
      "browserTarget": "my-app:build:development"
    }
  },
  "defaultConfiguration": "development",
  "options": {
    "port": 4204,
    "publicHost": "http://localhost:8005",
    "extraWebpackConfig": "webpack.config.js"
  }
},

需要在以下可注入服务中获取publicHost的值：

@Injectable({
  providedIn: 'root'
})
export class AppService {
    public getPublicHost() {
        ...
    }
}

由于应用是通过Angular模块联邦运行的远程应用，window.location.host仅返回父壳应用URL，无法直接获取远程应用的publicHost。

解决方案 #

方法1：利用环境变量硬编码（适合固定环境） #

1. 在环境文件中添加publicHost字段：

   • 开发环境src/environments/environment.ts：

     export const environment = {
       production: false,
       publicHost: 'http://localhost:8005'
     };
     

   • 生产环境src/environments/environment.prod.ts对应修改为生产环境的publicHost。

2. 在AppService中导入并使用：

   import { environment } from '../environments/environment';
   
   @Injectable({
     providedIn: 'root'
   })
   export class AppService {
       public getPublicHost() {
           return environment.publicHost;
       }
   }
   

方法2：通过Webpack DefinePlugin动态注入 #

借助ngx-build-plus的自定义Webpack配置，动态注入publicHost：

1. 修改webpack.config.js：

   const webpack = require('webpack');
   
   module.exports = {
     plugins: [
       new webpack.DefinePlugin({
         'process.env.PUBLIC_HOST': JSON.stringify('http://localhost:8005')
       })
     ]
   };
   

2. 在AppService中直接读取注入的变量：

   @Injectable({
     providedIn: 'root'
   })
   export class AppService {
       public getPublicHost() {
           return process.env.PUBLIC_HOST;
       }
   }
   

方法3：动态获取启动时的publicHost参数（推荐） #

如果需要根据启动命令动态传递publicHost，可以通过以下步骤实现：

1. 修改package.json的启动脚本（或直接在命令行传递）：

   "start": "ng serve --public-host http://localhost:8005"
   

2. 修改webpack.config.js，从ngx-build-plus的options中获取参数：

   const webpack = require('webpack');
   
   module.exports = (config, options) => {
     // 优先取启动命令传入的publicHost，默认值兜底
     const publicHost = options.publicHost || 'http://localhost:8005';
     config.plugins.push(
       new webpack.DefinePlugin({
         'process.env.PUBLIC_HOST': JSON.stringify(publicHost)
       })
     );
     return config;
   };
   

3. 在AppService中读取该变量：

   @Injectable({
     providedIn: 'root'
   })
   export class AppService {
       public getPublicHost() {
           return process.env.PUBLIC_HOST;
       }
   }
   

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