Angularfire2 не может найти модуль firebase / app

app.component:

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { RoomComponent } from './component/room/room.component';
import { AngularFireAuth } from '@angular/fire/auth';
import { FirebaseService } from "./service/firebase.service";
import { AngularFireAuthModule } from 'angularfire2/auth';


imports: [
  BrowserModule,
  AngularFireModule.initializeApp(firebaseconfig),
  AngularFirestoreModule
],
providers: [
  FirebaseService,
  {
    provide: PERFECT_SCROLLBAR_CONFIG,
    useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
  },
  AngularFireAuth
],

файл package.json:

{
"dependencies": {
"@angular/animations": "^5.2.11",
"@angular/cdk": "^5.2.4",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.4",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"angularfire2": "^5.0.1",
"core-js": "^2.4.1",
"dateformat": "^3.0.3",
"firebase": "^5.5.1",
"rxjs": "^6.3.2",
"rxjs-compat": "^6.3.2",
  "zone.js": "^0.8.19"
  },
"devDependencies": {
"@angular/cli": "~1.7.4",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}

Импорт, который не работает, находится в службе:

import { AngularFirestore, AngularFirestoreCollection, 
   AngularFirestoreDocument } from 'angularfire2/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app'
import { Observable } from 'rxjs';

Я включил только зависимости, которые могут иметь какое-то отношение к ошибке, но если я что-то пропустил, сообщите мне.

Уже пробовал несколько версий. Это работает, но имеет ошибку. Проблема заключается в импорте {auth}, который позволяет мне войти в firebase. Не знаю, в чем проблема. Иногда он компилируется, иногда нет. Это единственная комбинация версий, которую я использовал до сих пор, которая иногда компилируется даже с ошибкой. Другие версии просто нарушают другой импорт.

Проект компилируется только в том случае, если я на мгновение удалю импорт аутентификации, а затем верну его, а затем сохраню.

Почему используются оба AngularFireAuth и auth из firebase/app? AngularFireAuth послужит этой цели.

Neelavar 26.09.2018 20:57

Я следил за этим: github.com/angular/angularfire2/blob/master/docs/auth/…. Я получаю ошибки, когда удаляю auth.

Daniel Sanchez 26.09.2018 22:17

Я также вижу, что у вас Angular 5, но с rxjs 6 и rxjs-compat. @angular/fire 5.0.1 построен для Angular 6 и rxjs 6. Если возможно, попробуйте Angular 6, @angular/fire 5.0.2 и удалите rxjs-compat (чтобы гарантировать, что используются только зависимости rxjs 6). Я вообще не использую auth от firebase/app, а вот @angular/fire 5.0.x. Пожалуйста, поделитесь какой-либо конкретной ошибкой - после этих изменений.

Neelavar 27.09.2018 04:07

Всегда полезно проверить package.jsonangularfire2 (используйте тег конкретного используемого выпуска angularfire2) и проверьте правильность используемой версии firebase и совпадение с ней в нашем угловом приложении package.json - для лучшей совместимости. Иногда несовместимая версия firebase с angularfire2 вызывает проблемы.

Neelavar 27.09.2018 04:08
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
4
4
15 156
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

В вашем app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

import { AppComponent } from './app.component';

const config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  storageBucket: "",
  messagingSenderId: ""
};

@NgModule({
  imports:      [ 
    BrowserModule,
    AngularFireModule.initializeApp(config),
    AngularFireDatabaseModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Убедитесь, что это app.module.ts, а не app.component.ts. Какую ошибку вы получаете?

Jigno Alfred Venezuela 26.09.2018 20:09

src / app / service / firebase.service.ts (4,22): ошибка TS2307: не удается найти модуль firebase / app. Он работает правильно, у него просто есть эта ошибка, я не знаю почему

Daniel Sanchez 26.09.2018 20:17
Ответ принят как подходящий

Я собираюсь начать с большого и просто посоветую попробовать удалить папку node_modules и package-lock.json, а затем повторно запустить команду npm install. Вдобавок всего несколько предложений ...

app.component (app.module?)

Ваш импорт и файлы несовместимы, я вижу, вы импортируете как с angularfire2, так и с @angular/fire. И хотя по сути это одно и то же, просто команда Angular переходит на @angular/fire. Запустите npm uninstall angularfire2, затем npm i @angular/fire. Наконец, вы должны обновить свой app.component (я думаю, вы имеете в виду app.module), так что ...

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { RoomComponent } from './component/room/room.component';
import { AngularFireAuth } from '@angular/fire/auth';
import { FirebaseService } from "./service/firebase.service";
import { AngularFireAuthModule } from '@angular/fire/auth';


imports: [
  BrowserModule,
  AngularFireModule.initializeApp(firebaseconfig),
  AngularFirestoreModule,
  AngularFireAuthModule // IMPORT THE AUTH MODULE IF YOU'RE GOING TO USE IT
],
  providers: [
    FirebaseService,
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    },
    // AngularFireAuth (don't need/should not provide this, allow the module to set this up)
  ],

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

Спасибо! Я уже исправил это и сделал кое-что из того, что вы сказали. Я обновил этот импорт, но он все еще не работал. Исправлено, заменив firebase / app на firebase. Я думаю, что он был изменен в более поздних версиях, и мой импорт устарел.

Daniel Sanchez 26.09.2018 22:55

Установите firebase с помощью этой команды npm i @angular/fire

npm install firebase

Решил мою проблему

Другие вопросы по теме