nativescript - 使用 Angular 为 NativeScript 设置不同环境变量的最佳方法是什么？

Question

在 Angular 中，将环境变量加载到应用程序中的实际方法是使用 environment.ts这是cli的一部分。

在 NativeScript 中，这似乎不适用于 NativeScript cli。

最好的方法是什么？

Answer 1

2018 年 8 月 25 日更新

如果您使用 webpack使用 NativeScript，您可以将环境变量传递给 webpack，然后您可以从代码中访问这些变量。当你第一次安装 NativeScript webpack 时，它会在你的 package.json 所在的同一文件夹中生成一个 webpack.config.js。在代码编辑器中打开 webpack.config.js 并搜索 new webpack.DefinePlugin并像这样修改它:

        new webpack.DefinePlugin({
            "global.TNS_WEBPACK": "true",
            'process.env': {
                'envtype': JSON.stringify(env && env.envtype ? env.envtype : ""),
                'gmapsKey': JSON.stringify(env && env.gmapsKey ? env.gmapsKey : ""),
                'stripeKey': JSON.stringify(env && env.stripeKey ? env.stripeKey : ""),
                // etc, these are just examples
            }
        }),

然后，在构建期间注入(inject)您的环境变量:

// for example
tns run android --bundle --env.envtype="dev" --env.gmapsKey="KEY_HERE" --env.stripeKey="KEY_HERE"

然后，您可以像这样在代码中访问您的环境变量:

有角

你可以创建一个 Angular 服务并在你想要的任何组件中访问你注入(inject)的变量。

import { Injectable } from '@angular/core';

declare var process: any;

@Injectable()
export class EnvironmentManagerService {
    private getEnvironmentVars(key: string): string {
        if (typeof process !== 'undefined' && process && process.env) {
            return process.env[key];
        } else {
            return "";
        }
    }

    public getGoogleMapsKey(): string {
        return this.getEnvironmentVars("gmapsKey");
    }

    public getStripePublishableKey(): string {
        return this.getEnvironmentVars("stripeKey");
    }

    public isDev(): boolean {
        return this.getEnvironmentVars("envtype") === "dev";
    }
}

没有角

在您的应用文件夹下的项目中创建一个新文件。您可以随意调用该文件。添加以下内容:

declare var process: any;

export function getEnvironmentVars(key: string): string {
    if (typeof process !== 'undefined' && process && process.env) {
        return process.env[key];
    } else {
        return "";
    }
}

您可以使用 import * as env from '<file path here>' 从任何地方导入该文件并调用 env.getEnvironmentVars(...) ，例如 env.getEnvironmentVars("gmapsKey") .

也可能有一些方法可以通过有条件地修改 webpack 包含的文件来模拟相同的 environment.ts 和 environment.prod.ts 方法，但我没有探索这种方法，因为上述方法足以满足我的目的。

如果你不使用 webpack，你可以使用 custom hooks方法，虽然我从未使用过它。