Typescript Error Cannot Find Module 'Firebase/App'
I Am Trying to Integrate Ngx-Admin with Firebase. I Have Install Firebase in My Angular Project. but It Gives Me Such Error "Typescript Error Cannot Find...
I am trying to integrate ngx-admin with firebase. i have install firebase in my angular project.but it gives me such error "typescript error cannot find module 'firebase/app'." i have try to install typing also but doesn't got any luck
my stackstrace
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 **
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.
Here is my code
environment.ts
export const environment = {
production: false,
firebase : {
apiKey: '***************************************',
authDomain: 'ionicadmin-123456.firebaseapp.com',
databaseURL: '
projectId: 'ionicadmin-123456',
storageBucket: 'ionicadmin-123456.appspot.com',
messagingSenderId: '123456789123',
},
};
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: '/' },
],
})
committee.component.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>
5 Answers
It seems that firebase 4.8.1 has changed its typescript typings.
For now you can revert back to firebase 4.8.0 by running the following:
npm uninstall firebase
npm install firebase@4.8.0
rm -rf node_modules
npm install
After Angular4+ this works differently. Below are the steps to use firebase into angular project:
$ npm install --save firebase @angular/fire -f
Next, you can create and export a constant for configuration of firebase, or open the environments/environment.ts file in your Angular project and add the firebaseConfig object inside the environment object. I prefer the second solution because can change depending on environment:
export const environment = { production: false, firebaseAppConfig: {...}
Import all needed modules into you custom module like this:
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
@NgModule({
// [...]
imports: [
// [...]
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule
],
Ether way if you want more details to create an angular project with firebase, follow the instruction in this link: Angular Firestore Tutorial
I experienced the same problem but i solved it after running npm install firebase in the directory where my package.json is available.
The solution for me was just to add compat to my imports.
Instead of
import firebase from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';
import {
AngularFirestore,
AngularFirestoreDocument,
} from '@angular/fire/firestore';
I wrote:
import { AngularFireAuth } from '@angular/fire/compat/auth';
import {
AngularFirestore,
AngularFirestoreDocument,
} from '@angular/fire/compat/firestore';
environment code like this
export const environment = {
production: false,
firebase : {
apiKey: '***************************************',
authDomain: 'ionicadmin-123456.firebaseapp.com',
databaseURL: '
projectId: 'ionicadmin-123456',
storageBucket: 'ionicadmin-123456.appspot.com',
messagingSenderId: '123456789123',
}
};
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
