如何將@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