Angular-CLI - 如何在分發之前替換文件中的某些字符串，基於環境

最初，我在Angular 2.4.0和webpack上使用Angular VS 2017模板。Angular-CLI - 如何在分發之前替換文件中的某些字符串，基於環境

由於升級到Angular 4的一些問題，我決定切換到Angular-CLI（angular 4）和net.core 2.0應用程序。我的應用程序已設置並正在運行。

我使用TFS的建設，並根據環境我有我的角度應用幾個不同的設置文件：

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

我導入基於環境中，這些文件填寫驗證配置：

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; 
}

在舊的項目我使用的WebPack來代替這部分基於環境：

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

像這樣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',] },

我如何與角度達到這個-CLI和packages.json？

我希望實現與現在一樣的行爲，其中TFS構建我有一個NPM任務，其中包含來自package.json的命令，例如分別爲每個環境的npm build debug或npm build release。

來源

2017-10-05 Amel Salibasic

可以使用角度CLI環境文件中（src /環境）

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

在你的打字稿

然後，導入變量，並根據需要

使用環境文件中使用你可以製作一個npm腳本

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

注意：如果你不指定環境，t他cli將使用在angular-cli.json中定義的默認環境{"apps": [{"environmentSource": "environments/environment.ts"}]}

cli還允許您添加其他環境文件。例如，您可以添加的src /環境/ environment.release.ts，然後在你的角cli.json，你會增加

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

現在你可以進行額外的NPM腳本中使用自定義環境文件

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

這是一篇很好的文章，涵蓋了上述內容。 http://tattoocoder.com/angular-cli-using-the-environment-option/

來源

2017-10-06 00:13:11 LLai

如果我想加載發佈文件，在這種情況下是environment.release.ts在service.ts文件中做任何更改都必須完成？或者IT保持相同的導入？在這種情況下，不需要字符串替換@AmelSalibasic相同的導入 –

。cli/webpack將處理使用什麼，所以導入總是'/ environments/environment' – LLai

我今天會嘗試，並且讓你知道很多 –

Angular-CLI - 如何在分發之前替換文件中的某些字符串，基於環境

回答

相關問題