TypeScript错误：找不到模块“firebase/app”

Question

我尝试将ngx-admin与Firebase集成。我已经在我的Angular项目中安装了Firebase，但是它给出了这样的错误：“typescript错误无法找到模块'firebase / app'”。我尝试安装typing，但没有得到任何好运。

我的堆栈跟踪

D:\admin-ionic> ng serve
Your global Angular CLI version (1.6.1) is greater than your local
version (1.4.9). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-21T08:36:34.546Z
Hash: ecdd99ad138ea0774dff
Time: 8026ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 694 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]

ERROR in D:/admin-society/node_modules/angularfire2/firestore/observable/fromRef.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firebase.app.module.d.ts (3,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/collection/collection.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/document/document.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/firestore.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/collection/changes.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/interfaces.d.ts (2,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/auth/auth.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/database/interfaces.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/database/database.d.ts (1,26): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/database/list/state-changes.d.ts (3,26): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/database/list/audit-trail.d.ts (3,26): Cannot find module 'firebase/app'.
ERROR in Error: Metadata version mismatch for module D:/admin-society/node_modules/angularfire2/index.d.ts, found version 4, expected 3, resolving symbol AppModule in D:/admin-society/src/app/app.module.ts, resolving symbol AppModule in D:/admin-society/src/app/app.module.ts, resolving symbol AppModule in D:/admin-society/src/app/app.module.ts
    at syntaxError (D:\admin-society\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)
    at simplifyInContext (D:\admin-society\node_modules\@angular\compiler\bundles\compiler.umd.js:24979:23)
    at StaticReflector.simplify (D:\admin-society\node_modules\@angular\compiler\bundles\compiler.umd.js:24991:13)
    at StaticReflector.annotations (D:\admin-society\node_modules\@angular\compiler\bundles\compiler.umd.js:24418:41)
    at _getNgModuleMetadata (D:\admin-society\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31)
    at _extractLazyRoutesFromStaticModule (D:\admin-society\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26)
    at Object.listLazyRoutesOfModule (D:\admin-society\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (D:\admin-society\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (D:\admin-society\node_modules\@ngtools\webpack\src\plugin.js:212:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (D:\admin-society\node_modules\@ngtools\webpack\src\plugin.js:448:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile.

这是我的代码

environment.ts

export const environment = {
  production: false,
  firebase : {
    apiKey: '***************************************',
    authDomain: 'ionicadmin-123456.firebaseapp.com',
    databaseURL: 'https://ionicadmin-123456.firebaseio.com',
    projectId: 'ionicadmin-123456',
    storageBucket: 'ionicadmin-123456.appspot.com',
    messagingSenderId: '123456789123',
  },
};

app.module.ts

->

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features
    NgbModule.forRoot(),
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
  ],
})

委员会组件.ts

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'ngx-chartjs',
  styleUrls: ['./committee.component.scss'],
  templateUrl: './committee.component.html',
})
export class CommitteeComponent {
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();
  }
}

committee.component.html

<ul>
    <li *ngFor="let item of items | async">
      {{ item.name }}
    </li>
  </ul>

- Tejaswi Pathari

Answer 1

看起来 Firebase 4.8.1 已经更改了其 TypeScript 类型。

目前，您可以通过运行以下命令回滚到 Firebase 4.8.0：

npm uninstall firebase
npm install firebase@4.8.0
rm -rf node_modules
npm install

- Matthew Mullin

---

在 React 上工作 - Ammar H Sufyan

Answer 2

在Angular4+版本中，这个工作方式有所不同。以下是将Firebase用于Angular项目的步骤：

$ npm install --save firebase @angular/fire -f

接下来，您可以创建并导出一个用于配置Firebase的常量，或者在Angular项目中打开environments/environment.ts文件，并将firebaseConfig对象添加到environment对象中。我更喜欢第二种解决方案，因为它可以根据环境进行更改。

export const environment = { production: false, firebaseAppConfig: {...}

像这样将所有所需模块导入您的自定义模块：

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';

@NgModule({
        // [...]
    imports: [
        // [...]
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFireDatabaseModule
    ],

无论如何，如果您想了解有关使用Firebase创建Angular项目的更多详细信息，请按照此链接中的指示操作：Angular Firestore教程。

- Avjol Sakaj

Answer 3

我也遇到了同样的问题，但在运行npm install firebase命令时，确保在package.json文件所在的目录中进行操作后，问题就得到了解决。

- Makafui Naaman

Answer 4

我的解决方案是在我的导入中添加compat。

而不是

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

我已经写好了：

import { AngularFireAuth } from '@angular/fire/compat/auth';
import {
  AngularFirestore,
  AngularFirestoreDocument,
} from '@angular/fire/compat/firestore';

- MikhailRatner

Answer 5

像这样的编程环境代码

export const environment = {
  production: false,
  firebase : {
    apiKey: '***************************************',
    authDomain: 'ionicadmin-123456.firebaseapp.com',
    databaseURL: 'https://ionicadmin-123456.firebaseio.com',
    projectId: 'ionicadmin-123456',
    storageBucket: 'ionicadmin-123456.appspot.com',
    messagingSenderId: '123456789123',
  }
};

- sunil subramanya