Question

我正在尝试使用

读取环境变量属性

process.env [＆＃39; KEY_TO_READ＆＃39;]

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

Cannot find name 'process'.

我在角度应用程序中读到的某个地方我们无法使用进程，因为它将在运行时定义。这是对的吗？如果是，那么任何人都可以建议我如何实现这一目标。我不想使用angular-cli环境文件选项。

Answer 1

在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",
"dotenv": "^6.2.0",

运行

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

要使用自定义Web包，必须在angular.json文件夹下的root上添加一些更改

"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),
    }
})]
}

更新

这也可能会给您带来麻烦，因此，如果不使用types.d.ts可以更好，因为稍后一切正常时declare var process nodejs.process error Variable 'process' must be of type 'Process', but here has type 'Process'.，您可能会收到错误，在这种情况下，请使用节点类型并删除文件typing.d.ts

如果尝试使用这些变量，则angular会抱怨类型定义。为了解决这个问题，请在typings.d.ts内创建一个名为d（扩展名为{{1}的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

的角度应用程序内使用env变量

someservice.ts

希望有帮助。

Answer 2

你可以这样使用它：

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

let KEY_TO_READ = environment.KEY_TO_READ;

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

Answer 3

您的环境文件为

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

从环境变量Angular 4中读取值

3 个答案: