从环境变量Angular 4读取值

我正在尝试使用读取环境变量属性

process.env['KEY_TO_READ']

我正在环境变量中设置此键。但是，它在编译时不会占用空间，只是我得到了以下错误：

Cannot find name 'process'.

---

我在angular应用程序中读到，我们不能使用进程，因为它将在运行时定义。对吗？如果是，那么谁能建议我如何实现这一目标。我不想使用angular cli环境文件选项。

您可以这样使用它：

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

let KEY_TO_READ = environment.KEY_TO_READ;

---

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

您的环境文件如下：

环境。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;
}

---

在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"

跑

要使用自定义web包，必须在

root

文件夹下的

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的情况下工作，效果会更好，因为当一切正常时，您可能会在以后遇到错误

declare var process nodejs.process error变量“process”必须是“process”类型，但是这里有类型“Process”。

在这种情况下，只需使用节点类型并删除文件

typing.d.ts

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

如果您试图使用这些变量，angular将抱怨类型定义。要解决这个问题，请在

*src/

中创建一个名为

typings.d.ts

（

d

扩展名，用于

declare

）的文件，并将以下内容放在其中：

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

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

---

希望有帮助。

我不想在代码中保留变量的作用域，这就是为什么我想采用这种方法可能会有所帮助。感谢您的回答，但我不想在代码中添加一些变量。即使您可以直接使用

环境。按_to _读取

，而无需存储在variable@Saravan假设我想把ip读给调用后端，但当它更改时，我不想在代码中构建和更改ip，而是想在环境变量中更改它。这样我就不必重新构建我的文件了，因为他们已经给出了两个文件，一个用于

开发

，另一个用于

生产

，如果您在

生产

中更改了开发需要的构建位，则不需要。检查process.env问题部分，看这似乎是定义

declarevarprocess:process抱怨，因为它以前在
index.d.ts
中定义为
declare var process:NodeJS.process。相反，最好是istanbul@0.4.5：此模块不再维护，请改为尝试此操作：我在下载依赖项时遇到此错误。知道吗？安装
dotenv
的目的是什么？生产环境如何，就像我使用命令--build进行构建一样？