Блог

Главная - Вопросы по программированию - Как добавить @angular / fire в рабочую область Nx (проект Angular)?

Как добавить @angular / fire в рабочую область Nx (проект Angular)?

#angular #firebase #angularfire2 #nrwl-nx #nrwl

#angular #огневая база #angularfire2 #nrwl-nx #nrwl

Вопрос:

Я хотел бы добавить @angular/fire в мое рабочее пространство Nx (приложение Angular).

Однако я стараюсь придерживаться лучших практик, однако в официальных документах нет ничего относительно добавления этой библиотеки в рабочую область.

Или я что-то упускаю?

  1. УСТАНОВКА
    • можно ли установить библиотеку с помощью стандартной команды?
    • нпм я @angular / fire … или … ng добавить @angular / fire
    • Существует ли конкретный «способ Nx» его установки?
  1. РАЗМЕЩЕНИЕ И ПРИСВОЕНИЕ ИМЕН
    В каком модуле я должен вызвать метод initializeApp()?

    • в модуле приложения? (именно так я делал это до принятия Nx)
    • или модуль библиотеки? (мне кажется, это ближе к философии Nx)
    • если ответом будет «модуль библиотеки»,
      • каким модулем он должен быть?
      • куда я должен поместить библиотеку / модуль и как я должен ее назвать?
      • будет ли хорошей идеей «библиотеки / доступ к данным / api»?
  1. ИСПОЛЬЗОВАНИЕ API
    • Как мне использовать установленный пакет и инициализированный модуль (lib)?
    • Должен ли я импортировать библиотеку api несколько раз в каждую библиотеку, которая будет нуждаться в функциональности?
    • Или мне импортировать библиотеку api только один раз в приложение?

Так строго придерживаться лучших практик (соглашений об именовании и т. Д.) Может показаться глупым, Но я действительно хочу все делать правильно.

Ответ №1:

  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 or @ngrx/store в приложениях и библиотеках.

Комментарии:

1. однако, когда я набираю «nx g @angular/ fire:ng-add» => Я получаю сообщение об ошибке «Невозможно разрешить @angular / fire: ng-add». EISDIR: незаконная операция в каталоге, прочитайте «. Есть идеи, почему это может происходить?

2. @PaxForce У меня такая же проблема. Вы выяснили, почему это так?

Ответ №2:

прежде всего, вам нужно загрузить firebase

npm i @angular / fire

и добавьте firebase в проект angular

ng добавить @angular / fire

А теперь импортируйте firebase в app.module.ts

 import { AngularFireModule } from '@angular/fire';  

@NgModule({  
  imports: [  

    AngularFireModule.initializeApp(environment.firebase)  
  ],  

})  

export class AppModule {}

и теперь вы можете использовать firebase в проекте angular

ссылка на официальные документы

https://github.com/angular/angularfire

Комментарии:

1. Я знаю — это стандартный угловой способ. Но я хочу сделать это «способом nx-workspace». Вероятно, это означало бы, что функциональность должна быть извлечена в библиотеку и использоваться определенным образом.

Ответ №3:

Вы можете просто установить его с помощью npm install.

Я бы предложил инициализировать в модуле приложения. Философия приложений Nx заключается в том, что они отвечают за создание и настройку библиотек. Особенно важно инициализировать в модуле приложения вместо библиотек при использовании одиночных элементов (например, Firebase, модуль корневого маршрутизатора, инициализация хранилища ngrx), чтобы случайно не инициализировать синглтон более одного раза.

Вы должны иметь возможность импортировать непосредственно из angularfire в свои библиотеки.