I tell you my problem. I started an angular course on udemy. The point is that in the course they use angular 4 and I use angular 10, and I realized late about this change of versions. I've been migrating a lot of things from angular 4 to angular 10 throughout the course but it got me a blocker.
We are doing an exercise where we are doing a shoppingCart Web Site where I am doing an Admin user and therefore, this can only have access that common users cannot. I make the components and services of this but apparently the version of the procedures used by the instructor are different from the current version of angular.
I leave the code that shows the problem (with a comment indicating where it occurs):
User.service.ts => This is one of the components that gives me an error
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument} from '@angular/fire/firestore';
import { AppUser } from './models/app-user';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private firestore: AngularFirestore) { }
save( user: firebase.User) {
this.firestore.collection('users').doc(user.uid).set({
name: user.displayName,
email: user.email
});
}
//The error message is: Cannot find name 'FirebaseObjectObservable'
get(uid: string): FirebaseObjectObservable<AppUser>{
return this.firestore.collection('users').doc(uid);
}
}
admin-auth-guard.service.ts => This is the other component that gives me an error
import { Injectable } from '@angular/core';
import { UserService } from './user.service';
import { AuthService } from './auth/auth.service';
import { CanActivate } from '@angular/router';
import { switchMap} from 'rxjs/operators';
import { map} from 'rxjs/operators';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AdminAuthGuardService implements CanActivate{
constructor(private auth: AuthService, private userService: UserService){
}
canActivate(): Observable<boolean>{
return this.auth.user$
//The error message is: Cannot find name "Property 'switchMap' does not exist on type 'Observable<User>'"
.switchMap(user => (this.userService.get(user.uid))
.map(appUser => appUser.isAdmin);
}
}
App-user.ts
export interface AppUser{
name: string;
email: string;
isAdmin: boolean;
}
app.module.ts
import { AdminOrdersComponent } from './admin/admin-orders/admin-orders.component';
import { AuthService } from './auth/auth.service';
import { UserService } from './user.service';
import { AngularFireModule } from '@angular/fire';
import { AdminProductsComponent } from './admin/admin-products/admin-products.component';
import { AuthGuardService } from './auth-guard.service';
import { AdminAuthGuardService } from './admin-auth-guard.service';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';
@NgModule({
declarations: [
AdminProductsComponent,
AdminOrdersComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot([
{path: 'admin/products', component: AdminProductsComponent, canActivate: [AuthGuardService, AdminAuthGuardService]},
{path: 'admin/orders', component: AdminOrdersComponent, canActivate: [AuthGuardService, AdminAuthGuardService]}
]),
AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule,
AngularFirestoreModule,
AngularFireAuthModule
],
providers: [
AuthService,
AuthGuardService,
UserService
],
bootstrap: [AppComponent]
})
export class AppModule { }
The firebase configuration is:
