Question

我不知道如何读取环境变量。我要在app.module.browser.ts

中初始化我的 APP_INITIALIZER

  @NgModule({
  bootstrap: [AppComponent],
  imports: [
    BrowserModule,
    AppModuleShared,
    AppAuthModule
  ],
  declarations: [],
  providers: [
    { provide: 'BASE_URL', useFactory: getBaseUrl },
    {
      provide: APP_INITIALIZER, // <-- HERE
      useFactory: configurationServiceFactory,
      deps: [ConfigurationService],
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor, //AuthInterceptor,
      multi: true
    }
    ConfigurationService,
    ErrorLogService
  ]

初始化之后，我有了一些常量变量。我想阅读我的环境变量。因此，我可以将其置于条件中，然后根据我的条件导入模块。

import { AccountsComponent } from "./customerList/components/accounts/accounts.component";
import { AccountsPlusComponent } from "./customerList/components/accounts-plus/accounts-plus.component";

let accountsInjection: any = ENV_VARIABLE ? AccountsComponent : AccountsPlusComponent;

@NgModule({
  declarations: [
    accountsInjection
  ],
  imports: [
...

注意：我的项目中没有app / environments /文件夹...（我仍在寻找一种放置方式）

编辑：我也想提供更多信息，我正在使用WEBPACK，是否应该使用另一种方法来获取我的Envarionment变量？

Answer 1

如果您想以env.variable_name的身份访问变量

Dotenv是一个零依赖模块，可加载环境变量。

安装：

npm install dotenv

在项目的根目录中创建一个.env文件。以NAME=VALUE的形式在新行上添加特定于环境的变量。例如：

apiUrl= 'url'
enviorement= 'dev'

在组件中

require('dotenv').config()

将变量用作：

process.env.appUrl,

Answer 2

这是针对角度6的。但是我们也可以在角度> 2中也具有类似的配置。 Angular.json

 "configurations": {
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
           },
"test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa.ts"
                }
              ]
            }

与其他环境类似。

Package.json-

  "start": "ng serve --configuration=dev",
    "prod": "ng serve --configuration=prod",
    "test": "ng serve --configuration=test",

在组件中-

import { environment } from '/../environments/environment'; // as per your path

//use like

environment.property_name

Angular 2+，如何在模块（Webpack）中读取环境变量

注意：我的项目中没有app / environments /文件夹...（我仍在寻找一种放置方式）

2 个答案: