Jak ponownie użyć kompilacji dla projektu Angular

Question

Jak mogę ponownie użyć moich Angularnych buildów, więc nie muszę budować dla każdego konkretnego środowiska?

Musimy znaleźć sposób na manipulowanie środowiskami w środowisku wykonawczym w Angular!

Mamy ustawienia dla każdego środowiska i używamy NG build --env = dev i budujemy dla środowiska dev. Jak mogę zmienić konfigurację w QA, UAT i środowiskach produkcyjnych?

Toolset: .NET Visual Studio Team Services, kątowe 2

Czy nie ma sposobu, aby to zrobić w czasie wykonywania? Czy utknęliśmy w czasie budowy/projektowania?

Czy możemy również rozważyć wybór środowisk w oparciu o nasze adresy URL z postfiksem? https://company-fancyspawebsite-qa .azurewebsites.net

PS: Jesteśmy przy kątowym Folder 2 środowisk i aplikacji Ustawienia plików dla każdego środowiska.

Answer 1

używam usługi config dostarczyć edytowalne ustawienia konfiguracyjne w czasie wykonywania. (to jest za pomocą skośnych CLI)

config.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 

export interface Config { 
    PageSize: number; 
    EnableConsoleLogging: boolean; 
    WebApiBaseUrl: string; 
} 

@Injectable() 
export class ConfigService { 
    private config: Config; 

    constructor(private http: Http) { } 

    public getConfigSettings(): Config { 
     if (!this.config) { 
      var Httpreq = new XMLHttpRequest(); 
      Httpreq.open("GET", 'config.json', false); 
      Httpreq.send(null); 

      this.config = JSON.parse(Httpreq.responseText); 

      if (this.config.EnableConsoleLogging) 
       console.log("Config loaded", this.config); 
     } 

     return this.config; 
    } 
} 

config.json zlokalizowane w moim folderze src

{ 
    "WebApiBaseUrl": "http://myWebApi.com", 
    "EnableConsoleLogging": true, 
    "PageSize": 10 
} 

dodać config.json do swoich aktywów w .angular -cli.json

{ 
    }, 
    "apps": [ 
    { 
     "assets": [ 
     "config.json" 
     ] 
    } 
    } 
} 

jak go używać

export class MyComponent { 
    private config: Config; 

    constructor(private configService: ConfigService) { 
     this.config = configService.getConfigSettings(); 

     console.log(this.config.WebApiBaseUrl); 
    } 
}