8

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

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.

enter image description here

enter image description here

enter image description here

+1

Jaką macie kątową konfigurację w danym środowisku? Czy możesz podać więcej szczegółów? –

+0

Sprawdź [to] (https://github.com/angular/angular-cli/issues/7506), [this] (https://github.com/angular/angular-cli/issues/3855) i [this ] (https://github.com/angular/angular-cli/issues/2508#issuecomment-257988755) kilka sposobów podejścia do tego. –

+0

używamy plików folderów i plików ustawień środowiska Angular 2 dla każdego środowiska. –

Odpowiedz

4

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); 
    } 
} 
+0

Świetne czytanie i rozważanie go już teraz. –

+0

Nie mogę oznaczyć go jako odpowiedzi. Mój przyjaciel w pracy stwierdza, że ​​jest to niemożliwe przy użyciu tego i posiadające jedną definicję CI do wstrzykiwania zmiennych uruchomieniowych. Byłoby wspaniale przesłać przykładowy projekt kątowy dla mnie, aby pokazać go jako PoC. –

+0

Nie ma problemu, tutaj jest GIT: https://github.com/medeirosrich/ConfigExample bez względu na to, czy budujesz dev czy prod, możesz edytować wyjście config.json w folderze dist, a ustawienia zostaną pobrane w czasie wykonywania gdziekolwiek zdecydujesz się wdrożyć. –