使用Angular

Question

在Angular中，实际上将env vars加载到应用程序中的方式是使用File to Launch : RUNDLL32.EXE Command Line : SETUPAPI.DLL,InstallHinfSection DefaultInstall 132 [#MyDriver.inf]，它是cli的一部分。

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

这样做的最佳方法是什么？

Answer 1

更新8/25/2018

如果您将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
            }
        }),

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

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

然后，您可以像这样通过代码访问环境变量：

使用Angular

您可以创建Angular服务，并在所需的任何组件中访问注入的变量。

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";
    }
}

没有角度

在您的项目的app文件夹下创建一个新文件。您可以根据需要调用该文件。添加以下内容：

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方法，尽管我从未使用过。

Answer 2

默认情况下，webpack.config.js文件中设置了以下内容：

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

mode变量取自webpack.config.js文件中的以下代码：

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

要在webpack.config.js中设置production变量，必须在构建/运行时设置--release标志。 https://docs.nativescript.org/tooling/docs-cli/project/testing/run.html声明：

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

这意味着要在本地构建“生产模式”而不构建发行的.apk文件，您必须执行arao6所说的。

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

2 个答案:

更新8/25/2018

使用Angular

没有角度