I installed an angular dashboard template which I tested with ng serve to confirm worked. I then run
npm install firebase @angular/fire --save
to install firebase. And after adding firebase project credentials and editing the app.module.ts
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AuthInterceptor, AuthService, FakeBackendInterceptor } from '@services/*';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChartsModule } from './pages/charts';
import { ComponentsModule } from './pages/components';
import { DashboardModule } from './pages/dashboard';
import { Dashboard2Module } from './pages/dashboard2';
import { FormsModule } from './pages/forms';
import { AngularFireModule } from "@angular/fire";
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
ComponentsModule,
DashboardModule,
Dashboard2Module,
FormsModule,
ChartsModule,
HttpClientModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
],
providers: [
AuthService,
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
},
{
provide: HTTP_INTERCEPTORS,
useClass: FakeBackendInterceptor,
multi: true,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}
I get the following errors when I try to compile.
ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:10 - error TS2614: Module '"../../firebase"' has no exported member 'analytics'. Did you mean to use 'import analytics from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:21 - error TS2614: Module '"../../firebase"' has no exported member 'app'. Did you mean to use 'import app from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:26 - error TS2614: Module '"../../firebase"' has no exported member 'auth'. Did you mean to use 'import auth from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:32 - error TS2614: Module '"../../firebase"' has no exported member 'database'. Did you mean to use 'import database from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:42 - error TS2614: Module '"../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:53 - error TS2614: Module '"../../firebase"' has no exported member 'functions'. Did you mean to use 'import functions from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:64 - error TS2614: Module '"../../firebase"' has no exported member 'messaging'. Did you mean to use 'import messaging from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:75 - error TS2614: Module '"../../firebase"' has no exported member 'performance'. Did you mean to use 'import performance from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:88 - error TS2614: Module '"../../firebase"' has no exported member 'remoteConfig'. Did you mean to use 'import remoteConfig from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:102 - error TS2614: Module '"../../firebase"' has no exported member 'storage'. Did you mean to use 'import storage from "../../firebase"' instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app';
~~~~~~~
node_modules/@angular/fire/auth/auth.d.ts:4:10 - error TS2614: Module '"../../../firebase"' has no exported member 'User'. Did you mean to use 'import User from "../../../firebase"' instead?
4 import { User, auth } from 'firebase/app';
~~~~
node_modules/@angular/fire/auth/auth.d.ts:4:16 - error TS2614: Module '"../../../firebase"' has no exported member 'auth'. Did you mean to use 'import auth from "../../../firebase"' instead?
4 import { User, auth } from 'firebase/app';
~~~~
node_modules/@angular/fire/auth/auth.d.ts:12:14 - error TS2411: Property 'authState' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.
12 readonly authState: Observable<User | null>;
~~~~~~~~~
node_modules/@angular/fire/auth/auth.d.ts:16:14 - error TS2411: Property 'idToken' of type 'Observable<string>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.
16 readonly idToken: Observable<string | null>;
~~~~~~~
node_modules/@angular/fire/auth/auth.d.ts:20:14 - error TS2411: Property 'user' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.
20 readonly user: Observable<User | null>;
~~~~
node_modules/@angular/fire/auth/auth.d.ts:26:14 - error TS2411: Property 'idTokenResult' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.
26 readonly idTokenResult: Observable<auth.IdTokenResult | null>;
~~~~~~~~~~~~~
node_modules/@angular/fire/firestore/interfaces.d.ts:2:10 - error TS2614: Module '"../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../firebase"' instead?
2 import { firestore } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firestore/collection/collection.d.ts:2:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../firebase"' instead?
2 import { firestore } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firestore/document/document.d.ts:5:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../firebase"' instead?
5m import { firestore } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firestore/collection-group/collection-group.d.ts:2:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../firebase"' instead?
2 import { firestore } from 'firebase/app';
~~~~~~~~~
node_modules/@angular/fire/firestore/firestore.d.ts:8:10 - error TS2614: Module '"../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../firebase"' instead?
8 import { firestore } from 'firebase/app';
But I cant figure out the cause of the errors. I have tried looking at several online tutorials for integrating firebase with angular but I cant see anything wrong
UPDATE
Attempted following the tutorial in https://www.positronx.io/full-angular-7-firebase-authentication-system/ word for word but I am still getting the same type of error
I had a similar problem with Angular using Ionic, but after saving all the files and compiling again, the problem was gone. Why? I don't know, but in other projects I had similar situations.
Try to change something irrelevant (like adding some spaces between the lines) of each file you have been editing and save them before compiling.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments