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

Question

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

由于升级到 Angular 4 的一些问题，我决定切换到 Angular-CLI(angular 4) 和 net.core 2.0 应用程序。我的应用程序已设置并正在运行。

我正在使用 TFS 进行构建，并且根据环境，我的 Angular 应用程序中有几个不同的设置文件：

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

我是根据环境导入这些文件来填写Auth Configuration：

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/