如何将@angular/fire 添加到 Nx 工作区（Angular 项目）？

Posted 2023-03-23

【中文标题】如何将@angular/fire 添加到 Nx 工作区（Angular 项目）？

【英文标题】：How add @angular/fire into Nx Workspace (Angular project)?

【发布时间】：2021-05-21 05:28:29

【问题描述】：

我想将 @angular/fire 添加到我的 Nx 工作区（Angular 应用程序）中。 我试图与最佳实践保持一致，但是，官方文档中没有关于将此库添加到工作区的任何内容。 还是我错过了什么？

安装 可以通过标准命令安装lib吗？ npm i @angular/fire ... 或 ... ng 添加@angular/fire 是否有特定的“Nx 方式”来安装它？

放置和命名 我应该在哪个模块中调用 initializeApp() 方法？

在 AppModule 中？ （这是我在采用 Nx 之前的做法）

还是一个 lib 模块？ （在我看来，这似乎更接近 Nx 哲学）

如果答案是“一个 lib 模块”

应该是哪个模块？ 我应该把 lib/module 放在哪里，我应该给它起什么名字？ “libs/data-access/api”是个好主意吗？

使用 API 如何使用已安装的包和初始化的模块（lib）？ 我是否应该将 api 库多次导入到每个需要该功能的库中？ 还是我只一次将 api 库导入应用程序？

如此严格地坚持最佳实践（命名约定等）可能看起来很愚蠢，但我真的想以正确的方式做事。

【参考方案1】：

首先你需要下载firebase

npm i @angular/fire

并在 Angular 项目中添加 Firebase

ng 添加@angular/fire

现在在 app.module.ts 中导入 firebase

import  AngularFireModule  from '@angular/fire';  

@NgModule(  
  imports: [  

    AngularFireModule.initializeApp(environment.firebase)  
  ],  

)  

export class AppModule 

现在您可以在 Angular 项目中使用 Firebase

官方文档链接

https://github.com/angular/angularfire

【讨论】：

我知道 - 这是标准的 Angular 方式。但我想用“nx-workspace 方式”来做。这可能意味着将功能提取到库中并以特定方式使用。

【参考方案2】：

你可以用 npm install 安装它。

我建议在 app 模块中进行初始化。应用程序的 Nx 理念是它们负责编写和配置库。使用单例（如 Firebase、根路由器模块、ngrx 存储初始化）时，在 app 模块而不是库中进行初始化尤为重要，这样您就不会意外地多次初始化单例。

您应该能够直接从库中的 angularfire 导入。

【参考方案3】：

您可以使用 npm (npm i @angular/fire) 安装它，然后运行 ​​nx g @angular/fire:ng-add。文档：https://nx.dev/latest/angular/getting-started/cli-overview#ng-add-functionality 这应该仍然在您应用的AppModule 中。 您可以在任何需要的地方导入包。 AppModule 需要导入包并设置应用程序，以便其他库可以使用它。这与在应用程序和库中使用 @angular/router 或 @ngrx/store 没有什么不同。

【讨论】：

感谢您的回答，但是，当我输入“nx g @angular/fire:ng-add”=> 时出现错误“无法解析 @angular/fire: ng-add.EISDIR：对目录的非法操作，读取”。知道为什么会发生这种情况吗？

@PaxForce 我也有同样的问题。你找到原因了吗？