Angular-CLI - Wie man eine Zeichenfolge in Dateien vor der Verteilung ersetzt, basierend auf der Umgebung

Question

Ursprünglich verwendete ich Angular VS 2017 Template mit Angular 2.4.0 und webpack.

Aufgrund einiger Probleme beim Upgrade auf Angular 4 habe ich mich für Angular-CLI (eckig 4) und net.core 2.0 App entschieden. Meine App ist eingerichtet und läuft.

ich TFS verwende für Build, und basierend auf Umwelt Ich habe einige verschiedene Einstellungen Dateien in meinem Winkel App:

• app.settings.debug.ts
• app.settings.release.ts
• app.settings.ts

ich diese Dateien auf Umgebung auf Basis am Import von Auth Konfiguration zu füllen:

import { Injectable } from '@angular/core'; 
import { AppSettings } from '../../app.settings'; 

@Injectable() 
export class AuthConfiguration { 

    // The Issuer Identifier for the OpenID Provider (which is typically obtained during Discovery) MUST exactly match the value of the iss (issuer) Claim. 
    public iss = AppSettings.API_AUTH_URL; 

    public server = AppSettings.API_AUTH_URL; 

    public redirect_url = AppSettings.WEBAPP_URL; 

    // This is required to get the signing keys so that the signiture of the Jwt can be validated. 
    public jwks_url = AppSettings.API_AUTH_URL + '/.well-known/openid-configuration/jwks'; 

    // The Client MUST validate that the aud (audience) Claim contains its client_id value registered at the Issuer identified by the iss (issuer) Claim as an audience. 
    // The ID Token MUST be rejected if the ID Token does not list the Client as a valid audience, or if it contains additional audiences not trusted by the Client. 
    public client_id = 'angular2client'; 

    public response_type = 'id_token token'; 

    public scope = 'api openid profile'; 

    public post_logout_redirect_uri = AppSettings.WEBAPP_URL; 
} 

In alten Projekt habe ich verwendet webpack diesen Teil auf die Umwelt basiert zu ersetzen:

import { AppSettings } from '../../app.settings'; 

wie dies in webpack.config.js:

{ test: /\.ts$/, include: /ClientApp/, use: [{ loader: 'string-replace-loader', query: { search: '/app.settings', replace: isLocalhost ? '/app.settings' : isDebug ? '/app.settings.debug' : '/app.settings.release' }, }, 'awesome-typescript-loader?silent=true', 'angular2-template-loader',] }, 

Wie kann ich das erreichen mit Winkel -CLI und packages.json?

Ich würde gerne das gleiche Verhalten wie jetzt erreichen, wobei TFS Build Ich habe eine NPM-Aufgabe mit dem Befehl von package.json zum Beispiel, npm build debug oder npm build release für jede Umgebung jeweils.

Answer 1

Sie können die Umgebungsdateien von Winkel cli in (src/Umgebungen) verwenden

// src/environments/environment.ts 
export const environment = { 
    API_AUTH_URL: 'auth_url' 
} 

Dann in Ihrem Typoskript, die Variable importieren und als

benötigt verwenden

// service.ts 
import { environment } from './environments/environment'; 

@Injectable() 
export class AuthConfiguration { 
    public iss = environment.API_AUTH_URL; 
} 

die Umwelt-Datei zu verwenden Sie können ein Skript npm

"build-dev": "ng build --environment=dev" 

Hinweis machen: wenn Sie die Umwelt nicht angeben, t er cli verwendet die Standardumgebung, die in der Datei angular-cli.json in {"apps": [{"environmentSource": "environments/environment.ts"}]}

definiert ist. Mit dem CLI können Sie außerdem zusätzliche Umgebungsdateien hinzufügen. Zum Beispiel können Sie src/Umgebungen/environment.release.ts, dann in Ihrem Winkel cli.json hinzuzufügen, würden Sie

{ 
    "apps": [{ 
     ..., 
     "environments": { 
      ..., 
      "release": "environments/environment.release.ts" 
     } 
    }] 
} 

hinzufügen Jetzt können Sie ein zusätzliches npm Skript machen Ihre individuelle Umgebung Datei verwenden

"build-release": "ng build --environment=release" 

Hier ist ein ziemlich guter Artikel über die oben genannten. http://tattoocoder.com/angular-cli-using-the-environment-option/