Question

使用Angular 7，我需要可以在命令行/终端中击中的命令，例如yarn serve --SERVER_API_URL ='https://localhost:8000'，但我无需在代码中将硬编码值写入SERVER_API_URL。

我试图在package.json中编写命令 “ serve：dev”：“ export NODE_ENV = development && yarn run webpack：dev-run”，但我仍在获取本地主机服务器而不是像“ dev.hello.net”这样的开发服务器。以及类似的测试环境和生产环境。

export const SERVER_API_URL = process.env.SERVER_API_URL;

"serve:dev": "export NODE_ENV=development && yarn run webpack:dev-run",

 plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: `'${options.env}'`,
                DEBUG_INFO_ENABLED: options.env === 'development',
                SERVER_API_URL: `''`
            }
        }),
        new CleanWebpackPlugin(utils.root('../public/app'), {root: utils.root(), verbose: true}),
        new CopyWebpackPlugin([
            {
                from: './src/assets',
                to: 'assets',
                ignore: ['images/**/*', 'fonts/**/*']
            },
        ]),

Answer 1

您需要在webpack.config.js文件中进行更改以接受环境值。为此，请找到“插件”部分，然后进行如下修改。

webpack.config.js

plugins: [
            // Define useful constants like TNS_WEBPACK
            new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
                // "process": undefined,
                'process.env': {
                    'buildmode': JSON.stringify(env && env.buildmode ? env.buildmode : "")                   
                    // etc, these are just examples
                }
            })
]

因此，在运行应用程序时，请使用ng命令使用以下参数

--env.buildmode='Production'

在角度应用程序中获取环境变量。

declare var process: any;
export class test{
constructor(){
 console.log('env variables', this.getEnvironmentVars('buildmode'));
}

private getEnvironmentVars(key: string): string {
    console.log('process', process);
    if (typeof process !== 'undefined' && process && process.env) {
      return process.env[key];
    } else {
      return BuildMode.DEVELOPMENT
    }
  }

}

package.json中的命令用于安装环境

1 个答案: