Question

我正在尝试更新我的代码库，以便无论环境如何，使用的变量都可以工作。 Angular的angular.json可以添加特定于环境的配置。除此之外，我想知道是否可以以及如何在特定环境配置中使用特定于环境的变量，而不必为其他环境实际构建。这样，在推广构建时，我就不必为该特定环境构建。

我尝试从window.location开始使用，但是无法正常工作。任何想法/帮助表示赞赏。

// env.ts

const local = {
  x: '',
  y: '',
  z: ''
};

const stg = {
  x: '',
  y: '',
  z: ''
};

const prd = {
  x: '',
  y: '',
  z: ''
};


// angular.json

"configurations": {
  "local": {
    // ...local
  },
  "stg": {
    // ...stg
  },
  "production": {
    //   ... prod
  }
}

Answer 1

我发现本文最终是解决方案的解决方案。 Compile-time vs. Runtime configuration of your Angular App

APP_INITIALIZER允许推迟模块（通常是AppModule）的“启动”。如果您想知道这是如何在后台实现的，那么Angular是开源的，因此您可以阅读source?。

// AppConfigService

import {
  Injectable
} from '@angular/core';
import {
  HttpClient
} from '@angular/common/http';

@Injectable()
export class AppConfigService {
  private appConfig;

  constructor(private http: HttpClient) {}

  loadAppConfig() {
    return this.http.get('/assets/data/appConfig.json')
      .toPromise()
      .then(data => {
        this.appConfig = data;
      });
  }

  getConfig() {
    return this.appConfig;
  }
}




// app.module.ts
...
import {
  NgModule,
  APP_INITIALIZER
} from '@angular/core';
import {
  AppConfigService
} from './app-config.service';

const appInitializerFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  };
};

@NgModule({
  ...
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFn,
      multi: true,
      deps: [AppConfigService]
    }
  ],
  ...
})
export class AppModule {}

关于此主题Runtime Environment Settings，Angular Application Environments

的一些其他有趣的讨论

角：如何建立不可知论的环境？

1 个答案: