在 Angular 项目中的生产构建中加载全局变量时出现问题

Question

尝试从 js 文件加载环境以拥有动态环境，独立于基于 this article 的构建。

env.js 文件已添加到项目中，如下所示：

(function (window) {
  window.__env = window.__env || {};

  // API url
  window.__env.apiUrl = 'http://dev.your-api.com';

  // Whether or not to enable debug mode
  // Setting this to false will disable console output
  window.__env.enableDebug = true;
}(this));

然后我将脚本添加到 index.html 以加载 js 文件：

<script src="env.js"></script>

我这样使用全局变量：

console.log(window['__env']);

我为项目服务一切正常，我构建项目（使用 ng build 进行常规构建）一切都很好，

但是当我使用 ng build --prod 构建时，全局变量为空，

如何告诉 webpack 有一个全局变量，你应该在不使用服务的情况下将其引入？

有什么想法吗？

Answer 1

我使用一个JSON文件读取环境动态构建独立：

这一行Load env.json in AppModule inside APP_Initilizer:

export function init_app(appLoadService: AppInitService) {
  return () => appLoadService.init("assets/env.json");
}

注意：不要忘记提供部分：

  providers: [
    EnvServiceProvider,
    AppInitService,
    AuthenticationService,
    // TabGuard,
    {
      provide: APP_INITIALIZER,
      useFactory: init_app,
      deps: [AppInitService],
      multi: true,
    }
    // ...
    ]

AppInitService：

@Injectable({
  providedIn: 'root'
})
export class AppInitService {

  // This is the method you want to call at bootstrap
  // Important: It should return a Promise
  public init(path:string) {
    return from(
        fetch(path).then(function(response) {
          return response.json();
        })
      ).pipe(
        map((config) => {
        window['__env'] = config;
        return
      })).toPromise();
  }
}

然后使用环境提供商提供envs：

import { EnvService } from './env.service';

export const EnvServiceFactory = () => {
  // Create env
  const env = new EnvService();

  // Read environment variables from browser window
  const browserWindow = window || {};
  const browserWindowEnv = browserWindow['__env'] || {};

  // Assign environment variables from browser window to env
  // In the current implementation, properties from env.js overwrite defaults from the EnvService.
  // If needed, a deep merge can be performed here to merge properties instead of overwriting them.
  for (const key in browserWindowEnv) {
    if (browserWindowEnv.hasOwnProperty(key)) {
      env[key] = window['__env'][key];
    }
  }
  return env;
};

export const EnvServiceProvider = {
  provide: EnvService,
  useFactory: EnvServiceFactory,
  deps: [],
};

像这样使用 env 提供程序：

  env: any;
  constructor(
    public envService: EnvService
  ) {
    this.env = this.envService;
  }

在 Angular 项目中的生产构建中加载全局变量时出现问题

Problem with Loading Global Variable in Production Build In Angular Project

environment

production

global-variables

angular

angular7