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

在Angular中，将环境变量加载到应用程序中的实际方法是使用

environment.ts

，它是cli的一部分

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

最好的方法是什么？

更新于2018年8月25日 如果您正在与NativeScript一起使用，则可以将环境变量传递到Web包中，然后可以从代码中访问该Web包。首次安装NativeScript webpack时，它将在package.json所在的同一文件夹中生成webpack.config.js。在代码编辑器中打开webpack.config.js，搜索

新的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
            }
        }),

然后，在构建过程中注入环境变量：

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

然后，您可以在如下代码中访问环境变量：

棱角分明 您可以创建一个角度服务，并在您想要的任何组件中访问注入的变量

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*作为env从“

导入该文件，并调用

env.getEnvironmentVars（…）

，例如

env.getEnvironmentVars（“gmapsKey”）

---

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

---

如果您不使用webpack，您可以使用这种方法，尽管我从未使用过它。

以下默认设置在

webpack.config.js

文件中：

new webpack.DefinePlugin({
    'global.TNS_WEBPACK': 'true',
    TNS_ENV: JSON.stringify(mode),
    process: 'global.process'
}),

const mode = production ? 'production' : 'development';

mode

变量取自

webpack.config.js

文件中的以下代码：

new webpack.DefinePlugin({
    'global.TNS_WEBPACK': 'true',
    TNS_ENV: JSON.stringify(mode),
    process: 'global.process'
}),

const mode = production ? 'production' : 'development';

要在webpack.config.js中设置

production

变量，必须在生成/运行时设置

--release

标志<代码>https://docs.nativescript.org/tooling/docs-cli/project/testing/run.html说明：

--发布-如果设置了，则通过在生产模式下运行webpack和在发布模式下运行本机构建来生成发布构建。否则，产生 调试版本

---

这意味着要在本地测试“生产模式”，而无需构建release.apk文件，您必须按照arao6所说的做。

谢谢，我将尝试此方法并报告。我的团队说，以前安装/学习Webpack很痛苦。从您的回答来看，这似乎不需要太多努力。这当然取决于您正在使用的代码库——有时很简单，有时您会在谷歌上搜索为什么在启用绑定时代码无法编译。是否可以从build.xconfig而不是CLI参数中获取这些变量值？我不明白为什么不可以。在定义插件之前，您可以读取xconfig文件——它只是Nodejs。可能也有一个npm模块。