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

Question

I'm trying to update my codebase so that regardless of the environment the variables used will work. Angular's angular.json has the ability to add environment specific configurations. In addition to that, I'd like to know if and how it's possible to use the environment specific variables with specific environment configs and not have to actually build for a different environment. So that when promoting builds I don't have to build for that specific environment.

I tried doing it off of the window.location , but I couldn't get that to work. Any ideas/help appreciated.

// 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

I found this article which ultimately was the solution for scenario. Compile-time vs. Runtime configuration of your Angular App

The APP_INITIALIZER allows to defer the “booting” of your module, normally the AppModule. If you're curious how this is implemented behind the scenes, well Angular is open source, so you can just go and read the 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 {}

Some other interesting discussion on this subject Runtime Environment Settings , Angular Application Environments