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

Question

我想将@angular/fire添加到我的 Nx 工作区（Angular 应用程序）中。

我试图与最佳实践保持一致，但是，官方文档中没有关于将此库添加到工作区的内容。

或者我错过了什么？

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

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

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

   • 还是 lib 模块？ （这在我看来更接近 Nx 哲学）

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

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

3. 使用 API
   
   • 如何使用已安装的 package 和已初始化的模块 (lib)？
   • 我是否应该将 api 库多次导入到每个需要该功能的库中？
   • 或者我只将 api 库导入应用程序一次？

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

Answer 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

Answer 2

您可以使用 npm install 来安装它。

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

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

Answer 3

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

Answer 4

以下步骤对我有用：

• npx create-nx-workspace@15.1.1
• npm 我@角/火
• firebase 注销
• firebase 登录
• nx g @angular/fire:ng-add

详情和图片可以在这里找到：

https://blog-host-d6b29.web.app/2022/11/27/nx-angular-fire.html