从环境变量角4读取值

Question

我正在尝试使用以下方法读取环境变量属性

Process.env‘’KEY_TO_READ‘

我在环境变量中设置的这个KEY_TO_READ。但是，它不是在编译时使用的，只是我得到了以下错误：

Cannot find name 'process'.

在我阅读的某个地方，就像在角应用程序中，我们不能使用进程，因为它将在运行时定义。是对的吗？如果是的话，有人能建议我如何做到这一点吗？我不想使用角-cli环境文件选项。

Answer 1

您将获得您的环境文件，

environment.ts:

export const environment = {  
  production: false,
  envName: 'dev',
  KEY_TO_READ: 'test'
};

导出它，以便您可以导入它：

import { environment } from './environment';

export class MyappAppComponent {  
  title = 'myapp works!';
  KEY_TO_READ = environment.KEY_TO_READ;
}

Answer 2

你可以这样使用它：

import { environment } from '../../environments/environment';

let KEY_TO_READ = environment.KEY_TO_READ;

它将选择在应用程序构建时定义的动态环境变量。

Answer 3

在env文件中传递一个密钥不会使它成为私有的，因此我有一个解决方案，您可以从环境变量中读取密钥，而无需在environment.ts中提及它。为此，您需要安装很少的依赖项。这些是与Angular 7兼容的版本--可能很少有其他版本--您可以自由地尝试新版本。

"@angular-builders/custom-webpack": "^7.2.0",
"@angular-builders/dev-server": "^7.2.1",
"@angular-devkit/build-angular": "^0.12.3"

跑

npm i @angular-builders/custom-webpack@7.2.0 @angular-builders/dev-server@7.2.1 @angular-devkit/build-angular@0.12.3

要能够使用自定义的web，必须在angular.json文件夹下添加一些更改

"build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig":{
          "path": "./extra-webpack.config.js" 
        },



"serve": {
      "builder": "@angular-builders/dev-server:generic",

在根文件夹下创建一个文件extra-webpack.config.js，并在其中添加以下内容：

const webpack = require('webpack');

module.exports = {
plugins: [new webpack.DefinePlugin({
    'process.env': {
        KEY_TO_READ: JSON.stringify(process.env.KEY_TO_READ),
    }
})]
}

更新

这也会给您带来一些麻烦，所以如果它没有typings.d.ts就更好了，因为当一切都正常运行时，您可能会得到一个错误--在这种情况下，只需使用节点类型并删除文件typing.d.ts

如果您尝试使用这些变量，角将抱怨类型定义。为了解决这个问题，在您的typings.d.ts (d扩展名为declare)的*src/中创建一个文件，并在其中放置以下内容：

declare var process: Process;

interface Process {
 env: Env
}

interface Env {
 KEY_TO_READ: string
}

最好只将配置集中在environment.ts文件中，并以这种方式使用

const KEY = `${process.env.KEY_TO_READ}`;
export const environment = {

production: false,
key : KEY
};

为了使这一工作，您需要运行您的应用程序通过运行以下命令

KEY_TO_READ="TEST" npm start

现在，您可以在someservice.ts中的角应用程序中使用env变量。

const Hash = `${environment.key}`;
export class SomeService{
console.log(Hash) //should display "TEST" in your console
}

希望能帮上忙。