Question

最初，我使用Angular VS 2017模板和Angular 2.4.0以及webpack。

由于升级到Angular 4的一些问题，我决定切换到Angular-CLI（角度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',] },

如何使用angular-CLI和packages.json实现这一目标？

我希望能够实现与现在相同的行为，其中TFS构建我有一个NPM任务，其中包含来自package.json的命令，例如，npm build debug或npm build release分别用于每个环境。

Answer 1

您可以在（src / environments）

中使用angular cli的环境文件

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

然后在您的打字稿中，导入变量并根据需要使用

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

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

要使用环境文件，您可以制作npm脚本

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

注意：如果您没有指定环境，cli将使用{"apps": [{"environmentSource": "environments/environment.ts"}]}

中angular-cli.json中定义的默认环境

cli还允许您添加其他环境文件。例如，您可以添加src / environments / environment.release.ts，然后在您的angular-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/

Angular-CLI - 如何在分发之前根据环境替换文件中的某些字符串

1 个答案: