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
。
可以使用角度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/
如果我想加载发布文件,在这种情况下是environment.release.ts在service.ts文件中做任何更改都必须完成?或者IT保持相同的导入?在这种情况下,不需要字符串替换@AmelSalibasic相同的导入 –
。cli/webpack将处理使用什么,所以导入总是'/ environments/environment' – LLai
我今天会尝试,并且让你知道很多 –