Angular9: ОШИБКА в целевой точке входа @ angular / fire / auth отсутствуют зависимости

Когда я запускаю npm run start, я получаю следующую ошибку, касающуюся firebase.

Технология: Angular версии 9, Firebase, Firestore, Geofirestore Angular CLI.

Ошибка:

ERROR in The target entry-point "@angular/fire/auth" has missing dependencies:
 - firebase/auth
 - firebase/app

Зависимости, на которые следует обратить внимание:

"@angular/cli": "~9.1.1",
"@angular/core": "~9.1.1",
"@angular/fire": "^5.1.1",
"firebase": "5.10.1",
"geofirestore": "3.2.3",

Пакет json:

{
  "name": "project",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "~9.1.1",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/platform-server": "^9.1.1",
    "@angular/pwa": "^0.901.1",
    "@angular/router": "~9.1.1",
    "@angular/service-worker": "^9.1.1",
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@hackages/ngxerrors": "^8.0.0",
    "@kolkov/angular-editor": "^1.1.2",
    "@nguniversal/express-engine": "^9.1.0",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@ngx-meta/core": "^8.0.2",
    "@ngx-pwa/offline": "^9.1.0",
    "@sentry/browser": "^5.15.4",
    "angular-google-map": "0.0.2",
    "animate.css": "^3.7.2",
    "aos": "^2.3.4",
    "basscss": "^8.1.0",
    "basscss-sass": "^4.0.0",
    "chart.js": "^2.9.3",
    "core-js": "^3.6.4",
    "express": "^4.17.1",
    "firebase": "5.10.1",
    "fs-extra": "^9.0.0",
    "geofirestore": "3.2.3",
    "http-server": "^0.12.1",
    "latlon-geohash": "^2.0.0",
    "lodash": "^4.17.15",
    "lozad": "^1.14.0",
    "moment": "^2.24.0",
    "ng2-truncate": "^1.3.17",
    "ngx-google-places-autocomplete": "^2.0.4",
    "ngx-prevent-double-submission": "^0.1.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

Ошибка захвата экрана:

введите описание изображения здесь

Код из моего приложения, использующего firebase / firestore с Angular 9:

import * as firebase from 'firebase/app';
import * as _geoHash from 'latlon-geohash';
import { AngularFireDatabase } from '@angular/fire/database';
import { AngularFirestore } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';
import { Observable, from, of } from 'rxjs';
import { GeoFirestore } from 'geofirestore';
import { map, take } from 'rxjs/operators';

import { FirebaseService } from '../services/firebase.service';
import { JobModel } from '../models/job.model';
import { StorageService } from '../services/storage.service';
import { UserService } from '../services/user.service';
import { UtilityService } from '../services/utility.service';

@Injectable()
export class JobService extends FirebaseService {
  public geo: any;
  public geofirestore: GeoFirestore;

  constructor(
    public angularFireDatabase: AngularFireDatabase,
    private angularFirestore: AngularFirestore,
    public storageService: StorageService,
    private userService: UserService,
    private utilityService: UtilityService
  ) {
    super(angularFireDatabase);

    const firestore = firebase.firestore();
    firestore.settings({ });
    this.geofirestore = new GeoFirestore(firestore);
  }

  public getCount(): any {
    const adzuna = firebase.firestore().collection('jobsCount').doc('adzuna');
    const hired = firebase.firestore().collection('jobsCount').doc('hired');

    return from(Promise.all([adzuna.get(), hired.get()])
      .then((querySnapshot) => {
        return { adzuna: querySnapshot[0].data(), hired: querySnapshot[1].data() };
      })
    );
  }
}

person AngularM    schedule 09.04.2020    source источник
comment
Не могли бы вы включить пример того, откуда вы импортируете @angular/fire/auth?   -  person MichaelSolati    schedule 10.04.2020
comment
@MichaelSolati Я добавил образец кода из своего приложения в конец вопроса. Позвольте мне знать, если вам нужно что-нибудь еще. Спасибо.   -  person AngularM    schedule 10.04.2020


Ответы (5)


Была такая же проблема. Сравнил мой package.json с другим моим проектом, который работал буквально на днях.

Я обнаружил, что пакета firebase там нет. Я просто скопировал это,

"firebase": "^ 7.13.2",

побежал

npm install

и вроде работает:

package.json:

"dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/fire": "^6.0.0",
    "@angular/forms": "~9.1.0",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "firebase": "^7.13.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },

Теперь я вижу, что у вас более старая версия, может быть, обновление решит проблему?

person Terence    schedule 11.04.2020
comment
Хотя ваше решение будет работать в некоторых случаях, может быть, в большинстве случаев, но в целом это не лучший подход для добавления пакетов в ваш package.json вручную. Вместо этого вы можете запустить npm install firebase, чтобы добавить этот пакет. Проверьте мой ответ где-нибудь для получения более подробной информации. - person Junaid; 18.05.2020

TL; DR
Вам понадобятся два пакета (@angular/fire & firebase) для правильного запуска вашего приложения, а затем для использования firebase / firestore.
Установите их с помощью ng add @angular/fire & npm install firebase

Пояснение:

Я получал эту ошибку, когда обслуживал свое приложение.

ERROR in The target entry-point "@angular/fire" has missing dependencies:
 - firebase/app

Причина этой ошибки: для правильной настройки firebase angular требуются два пакета @angular/fire & firebase. У меня был установлен только один из них с использованием ng add @angular/fire. Чтобы успешно запустить мой проект, мне пришлось установить пакет firebase, используя npm install firebase, и после этого он заработал.

person Junaid    schedule 18.05.2020

Просто обновите / установите Firebase в свой проект (локально, а не глобально). С помощью терминала перейдите в папку проекта и выполните:

npm install firebase@latest

В текущих версиях npm по умолчанию используется флаг --save, поэтому он автоматически изменяет package.json.

person Eneko    schedule 14.05.2020

Просто установите firebase в свое приложение.

npm install firebase --save
person Ahmad Sharif    schedule 13.06.2020

Я столкнулся с такой же ошибкой.

Я только что установил angular cli 8-ю версию. Мой предыдущий угловой кли был 10.

step 1> npm cache clean --force
step 2> npm uninstall -g @angular/cli
step 3> npm cache clean --force
step 4> npm install -g @angular/[email protected]
step 5> ng new project_name
step 6> ng add @angular/fire firebase

Надеюсь, что все работает хорошо.

person Khalifa Vhy    schedule 09.08.2020
comment
Команды следует форматировать, заключая их в обратные кавычки. Упорядоченный список можно отформатировать, поместив число и точку с последующим пробелом в начале строки и увеличивая число с каждой новой строкой в ​​списке. - person Jason Aller; 09.08.2020