从可发布的 Angular 库访问环境设置

Posted 2023-03-23

【中文标题】从可发布的 Angular 库访问环境设置

【英文标题】：Accessing the Environment setting from publishable Angular Library

【发布时间】：2019-10-23 19:58:10

【问题描述】：

我创建了一个基于 Nx 的工作区，它有两个 shell 应用程序（app1 和 app2）。将在这两个应用程序中重用此 CoreModule 库。

在添加 Ngrx 存储根时，我从库中访问环境对象时出现错误，因为环境文件夹存在于 shell 应用程序中。

请告诉我如何将环境对象注入核心模块，以便我可以对模块进行条件加载

!environment.production ? StoreDevtoolsModule.instrument() : []

这是我遇到错误的代码 sn-p，我在 cmets 中包围了该行。

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  StoreModule  from '@ngrx/store';
import  EffectsModule  from '@ngrx/effects';
import 
  APP_FEATURE_KEY,
  initialState as appInitialState,
  appReducer
 from './+state/app.reducer';
import  AppEffects  from './+state/app.effects';
import  NxModule  from '@nrwl/nx';
import  StoreDevtoolsModule  from '@ngrx/store-devtools';
// <error>
import  environment  from '../environments/environment';
// </error>
import  storeFreeze  from 'ngrx-store-freeze';

@NgModule(
  imports: [
    CommonModule,
    NxModule.forRoot(),
    StoreModule.forRoot(
       app: appReducer ,
      
        initialState:  app: appInitialState ,
        metaReducers: !environment.production ? [storeFreeze] : []
      
    ),
    EffectsModule.forRoot([AppEffects]),
    !environment.production ? StoreDevtoolsModule.instrument() : []
  ]
)
export class CoreModule 

更新：

我尝试使用此选项来注入环境，但我无法在 @NgModule 装饰器中使用 env。

@NgModule(
  imports: [CommonModule, HttpClientModule]
)
export class CoreModule 

  static forRoot(environment:any):ModuleWithProviders 
    return 
      ngModule :CoreModule,
      providers: [
        
          provide : 'env',
          useValue: environment
        
      ]  

【参考方案1】：

您可以在tsconfig.json 的path 配置中添加项目结构别名。

  "compilerOptions": 
    ...,  
    "baseUrl": ".",
    "paths": 
      ...,
      "@mainApp/*": ["app1/app/*"],
      "@secondApp/*": ["app2/app/*"]
    
  

建议（替代方法）：您可以尝试避免在共享模块中创建根状态。而是在相应的应用程序模块中创建根状态并在共享模块中创建功能状态并导入它们。这样可能会更容易。另外请检查，在共享模块中创建根存储并导入它们会创建一个或两个根存储的实例吗？

【参考方案2】：

这是一个常见问题，因为环境文件由 CLI 存储在应用程序级别。解决此问题的一种方法是拥有一个专用于特定应用程序环境的库libs/myapp/data-access-environment。这将包含两件事：

环境的类型定义 (MyAppEnv) 注入令牌 (MYAPP_ENV_TOKEN)

您可以使用注入令牌为应用程序提供值。例如。在你的app.module:

provide: [  provide: MYAPP_ENV_TOKEN, useValue: myEnv ] // import myEnv from environment.ts

然后在您的其他库中，您可以注入令牌并添加打字

constructor(@Inject(MYAPP_ENV_TOKEN) private env: MyAppEnv) 

通过这种方式，您可以将环境与您的应用解耦。

【讨论】：

我已经用我尝试过的选项更新了我的问题，但没有达到我的预期。