如何在 nrwl/nx 工作区的库中使用 app environment.ts？

Question

如果我有一个身份验证库，包含组件、服务、ngrx 等......我如何访问实现身份验证库的应用程序的环境？所以 Auth 服务应该知道后端 url 来进行登录。所以：

import { environment as env } from "@env";
@Injectable()
class AuthService {
    private endpoint = '/v1/auth';
    private backendHost = env.backendHost;

    authenticateUser(credentials) {
        return makeHttpRequestHereToBackend(this.backendHost.this.endpoint, credentials);
    }
}

无论在何处实现身份验证库，库服务都知道从实现所述库的应用程序环境中要命中哪个服务器。

谢谢！！

Answer 1

我认为更好的方法是创建一个 @environments 库。令牌方法不允许进行树摇动，并且看起来很陌生。lib 解决方案相对容易获得。

环境工作区库

1. nx generate library environments --directory=shared --tags="scope:shared,type:environments" --style=scss
2. npx rimraf ./libs/shared/environments/src/lib/*.*
3. mv ./apps/tiny-app/src/environments/*.* ./libs/shared/environments/src/lib
4. "export * from './lib/environment';" > ./libs/shared/environments/src/index.ts
5. npx rimraf ./apps/tiny-app/src/environments
6. 在项目build的架构师目标tiny-app中angular.json（或者project.json如果使用最新的 nx），将配置fileReplacements中的选项替换production为以下条目：

{
  "projects": {
    "tiny-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "libs/shared/environments/src/lib/environment.ts",
                  "with": "libs/shared/environments/src/lib/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    }
  }
}

7. 在 中main.ts，将环境导入语句替换为以下内容：

import { environment } from '@workspace/shared/environments';

解决方案取自https://github.com/LayZeeDK/nx-tiny-app-project/blob/master/README.md

Answer 2

一个对我有用的解决方案

app-config在 libs 下创建一个文件夹，并在 app-config 文件夹中添加一个“index.ts”文件。这个库可以在你所有的应用程序之间共享。在 index.ts 文件中添加以下内容

import { InjectionToken } from '@angular/core';

export const APP_CONFIG = new InjectionToken('Application config');

打开基本tsconfig.json文件并添加 app-config 的路径，以便它可以用于导入到您的应用程序中@app-workspace/app-config

"paths": {
      "@app-workspace/ui": ["libs/ui/src/index.ts"],
      "@app-workspace/auth": ["libs/auth/src/index.ts"],
      "@app-workspace/utils": ["libs/utils/src/index.ts"],
      "@app-workspace/app-config": ["libs/app-config/index.ts"]
    }

现在在您的应用程序中打开文件apps/app1/src/app/app.module.ts并对提供程序数组进行以下更改

import { APP_CONFIG } from '@app-workspace/app-config';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [
    { provide: APP_CONFIG, useValue: environment}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

这environment.ts是驻留在下面的示例文件app1

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
};

您也可以在共享库中使用 app-config，例如，假设您正在共享库中进行 api 调用 libs/auth/src/lib/services/auth.service.ts

import { APP_CONFIG } from '@app-workspace/app-config';
import { Inject, Injectable } from '@angular/core';

@Injectable()
export class AuthService {

  constructor(
    @Inject(APP_CONFIG) private appConfig: any
  ) {
        console.log(this.appConfig.apiUrl); // This will print `http://localhost:3000/api`
    }
}

希望这是有帮助的 :) 另外，如果在使用导入时出现任何错误，您可能需要重新启动应用程序。