无法解析“@firebase/firestore-types”

Question

I'm back at you with another question from Ionic 3 & Angularfire2 !
I changed my pages to make them run on android with plugins and all the stuff needed to use native functiuns at their maximum.
BUT, When I try to. I face a strange issue...
I have no problems when I am coding, I can use "GeoPoint" type with no problems, Visual Studio Code can bind type with the folder ( '@firebase/firestore-types') but when I run my app on android I get a big error telling me that the compiler can't bind my folder with the type...

So... I can't do anything, tried to change type to something else, tried to call the type directly from "firebase.firestore.GeoPoint" but nothing seems to work, even tried to delete the project and remake it but...
NOTHING:(

Anyway, I hope that you guys can help me with this, this is the error I get:

Error: ./src/pages/add-event/add-event.ts
Module not found: Error: Can't resolve '@firebase/firestore-types' in 'C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\src\pages\add-event'
resolve '@firebase/firestore-types' in 'C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\src\pages\add-event'
  Parsed request is a module
  using description file: C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\package.json (relative path: ./src/pages/add-event)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\package.json (relative path: ./src/pages/add-event)
    resolve as module
      looking for modules in C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules
        using description file: C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\package.json (relative path: ./node_modules)
          using description file: C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types is not a file
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types.json doesn't exist
            as directory
              existing directory
                using path: C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\index
                  using description file: C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\index doesn't exist
                    .ts
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\index.ts doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\index.json doesn't exist
[C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types]
[C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types.ts]
[C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types.js]
[C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types.json]
[C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\index]
[C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\index.ts]
[C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\index.js]
[C:\Users\Damien\Documents\Ecole\GREP\18032018\Vennel\node_modules\@firebase\firestore-types\index.json]
 @ ./src/pages/add-event/add-event.ts 17:0-53
 @ ./src/pages/add-event/add-event.module.ts
 @ ./src lazy
 @ ./node_modules/ionic-angular/util/ng-module-loader.js
 @ ./node_modules/ionic-angular/util/module-loader.js
 @ ./node_modules/ionic-angular/components/popover/popover-component.js
 @ ./node_modules/ionic-angular/index.js

My app.modules.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';

import { MyApp } from './app.component';
import { FIREBASE_CONFIG } from './firebase.credentials';
import { GOOGLE_MAPS_APIKEY } from './google.credentials';
import { AgmCoreModule } from '@agm/core';
import { EventService } from '../services/events/event.service';
import { HttpClientModule } from '@angular/common/http';
import {  } from '@firebase/firestore-types';
import { ToastService } from '../services/toast/toast.service';
import { NativeGeocoder } from '@ionic-native/native-geocoder';
import { AuthService } from '../services/auth/auth.service';
import { UserService } from '../services/users/user.service';
import { AngularFireAuth } from 'angularfire2/auth';
import { Geolocation } from '@ionic-native/geolocation';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(FIREBASE_CONFIG),
    AgmCoreModule.forRoot({
      apiKey:GOOGLE_MAPS_APIKEY
    }),
    AngularFirestoreModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    NativeGeocoder,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    EventService,
    ToastService,
    AuthService,
    UserService,
    AngularFireAuth,
    Geolocation
  ]
})
export class AppModule {}

The add-event page:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import {Event} from '../../models/event/event.interface';
import { EventService } from '../../services/events/event.service';
import { GOOGLE_MAPS_APIKEY } from '../../app/google.credentials';
import { HttpClient } from '@angular/common/http';
import { ToastService } from '../../services/toast/toast.service';
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult } from '@ionic-native/native-geocoder';
import { GeoPoint } from '@firebase/firestore-types';
import * as firebase from 'firebase/app';

@IonicPage()
@Component({
  selector: 'page-add-event',
  templateUrl: 'add-event.html',
})

export class AddEventPage {

  event : Event = {
    name : ['',''],
    address : undefined,
    city : '',
    place : '',
    date : undefined,
    tags : '',
    description : '',
    isPaying : false
  }

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    public httpClient: HttpClient, 
    private eventsServ:EventService,
    private toast : ToastService,
    private nativeGeocoder : NativeGeocoder,
    private testGeo : GeoPoint
  ){}

  getCoordinates(address:string){
    this.nativeGeocoder.forwardGeocode(address)
    .then((coordinates: NativeGeocoderForwardResult) => console.log('The coordinates are latitude=' + coordinates.latitude + ' and longitude=' + coordinates.longitude))
    .catch((error: any) => console.log(error));
  }

  addEvent(event){
    let geopoint : firebase.firestore.GeoPoint;
    let address : String = event.address;

    let url = "https://maps.googleapis.com/maps/api/geocode/json?address="+address+"&key="+GOOGLE_MAPS_APIKEY;
    let response = this.httpClient.get(url);

    response.subscribe(data =>{
      //var latitude =  data.results[0].geometry.location.lat;
      //var longitude =  data.results[0].geometry.location.lng; //s
      var latitude =  46;
      var longitude =  6; //s
      geopoint = new firebase.firestore.GeoPoint(latitude, longitude);
      event.address = geopoint;
      this.eventsServ.addEvent(event).then(ref=>{
        console.log(ref);
        this.toast.show('Événement ajouté avec succès !', 3000);
        this.navCtrl.setRoot('HomePage', {key:ref.id});
      });
    });

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AddEventPage');
  }

}

The package.json:

{
  "name": "Vennel",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@firebase/firestore": "^0.3.5",
    "@firebase/firestore-types": "^0.2.2",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/geolocation": "^4.5.3",
    "@ionic-native/native-geocoder": "^4.5.3",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "angularfire2": "^5.0.0-rc.6",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "firebase": "^4.11.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "jquery": "^3.3.1",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

I hope you guys can help me out with this, thank you in advance guys !

Damien

Answer 1

The -types packages are just types and will not work as runtime values. Use the @firebase/app module instead.

This works for me:

import * as firebase from 'firebase/app';

 deleteMemberId(chatGroupId: string, memberId: string, userIdToken: string): void {
    this.afs.doc<any>(`messageGroups/${chatGroupId}`).update({
      memberIds: firebase.firestore.FieldValue.arrayRemove(memberId) //here
    });
   }

Ref: https://github.com/angular/angularfire/issues/1518#issuecomment-375103751

Answer 2

For future searchers, I'll post what I did to squash my errors in VSCode

Old:

import {QueryDocumentSnapshot, DocumentData} from "@firebase/firestore-types";

await query.get().then((value:any) => { 
 value.forEach((doc:QueryDocumentSnapshot<DocumentData>) => {
    doc.ref.delete();
  });
});

New:

import admin from "firebase-admin";

await query.get().then((value:any) => { 
 value.forEach((admin.firestore.QueryDocumentSnapshot<admin.firestore.DocumentData>) => {
    doc.ref.delete();
  });
});