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 - 如何在分发之前替换文件中的某些字符串，基于环境

回答

相关问题