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

问题描述

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

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

还是我遗漏了什么？

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

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

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

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

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

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

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

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

解决方法

首先你需要下载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

,

你可以使用 npm install 安装它。

我建议在应用模块中初始化。应用程序的 Nx 哲学是它们负责组合和配置库。使用单例（如 Firebase、根路由器模块、ngrx 存储初始化）时，在应用模块而不是库中进行初始化尤为重要，以免意外地多次初始化单例。

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

,

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. 您可以在任何需要的地方导入包。 AppModule 需要导入包并设置应用程序，以便其他库可以使用它。这与在应用和库中使用 @angular/router 或 @ngrx/store 没有什么不同。