ERROR in node_modules/@types/googlemaps/index.d.ts -- A tuple type element list cannot be empty

Question

while trying to integrate the angular google maps - agm librarie in my angular project i got this error :

somthing is worng with some configuration or maybe something i have missed i m working with material 6 and angular 6 in this project thanks for your help

in terminal console

ERROR in node_modules/@types/googlemaps/index.d.ts(63,25): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(72,25): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(94,15): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(100,18): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(106,20): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(115,26): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(121,15): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(130,28): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(155,29): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(167,22): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(176,23): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(185,23): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(3308,76): error TS2370: A rest parameter must be of an array type.

here is what i did :

npm i @agm/core 
npm i -D @types/googlemaps 
ng add @angular-material-extensions/google-maps-autocomplete

app.module.ts

import { AgmCoreModule } from '@agm/core';
import { MatGoogleMapsAutocompleteModule } from '@angular-material-extensions/google-maps-autocomplete';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [
     AgmCoreModule.forRoot({
          apiKey: 'YOUR_KEY',
          libraries: ['places']
        }),
     MatGoogleMapsAutocompleteModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

mycomponent.component.html

<mat-form-field>
  <mat-label>Address << using the directive >></mat-label>
  <input matInput
       matGoogleMapsAutocomplete
       [country]="de"
       (onAutocompleteSelected)="onAutocompleteSelected($event)"
       (onLocationSelected)="onLocationSelected($event)">
</mat-form-field>

mycomponent.component.ts

...
import {} from 'googlemaps';



@Component({
  selector : ...
...

src/index.d.ts

declare module 'googlemaps';

tsconfig.app.json

    ...
   "types": [
      "googlemaps"
    ]
   ...

package.json

 "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular-material-extensions/google-maps-autocomplete": "^2.0.0",
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/material": "^6.1.0",
    "@angular/material-moment-adapter": "^8.2.3",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "googleapis": "28.1.0",
    ...
    "@types/googlemaps": "^3.39.0",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.3",
    "zone.js": "~0.8.26"
  },

followed tutorial : link to tuto used

Solution : i don't know why and how but rolling back to an older version worked for me !! but that's not the proper solution i looking for

Drugi

If you followed this tutorial you checkout there package.json they are using angular 8 it may be relevant github.com/angular-material-extensions/google-maps-autocomplete/… – Overfly

is there a way to use angular 6 with the same tuto and get working demo ? – Drugi

probably yes, but you may need to lower the google-maps version if it solved your issue please let me know so I will post it as answer – Overfly

where can i find a working version of google maps with angular version 6 ? how can i lower my google-maps version as u see i m using "@agm/core": "^1.1.0" and "@types/googlemaps": "^3.39.0" – Drugi

Try To Add This In Top of File.ts : /// <reference types="@types/googlemaps" /> – Broke

there is no File.ts explain more ?? @Broke – Drugi

I Mean Your File typescript , Where you use google map (ex: mycomponent.component.ts) – Broke

not working !! sorry – Drugi

Answer 1

You need to go back to a version that works.

In your package.json file, choose an older version specifically:

...    
"@types/googlemaps" :  "3.26.15"
...

Olfe

you are kinda right i have tried this "@types/googlemaps": "3.37.7" and worked but the prob is why doesn't work on "@types/googlemaps": "3.39.0" – Drugi

i haven't looked too closely, but issues like this occur when there are breaking changes within minor versions. most ppl have use the "^" character (before the version number) in the package.json file. having this character keeps you up to date with each minor version release. removing that character simply forces your reference to your library to never change. If you are really interested in digging deeper, compare the 2 minor versions side by side. – Olfe

Answer 2

downgrade your version of googlemapps https://www.npmjs.com/package/@types/googlemaps/v/3.38.0

run the command npm i @types/[email protected]

Polecat

yes this working but why doesn't work on 3.39.0 ?? that the main problem – Drugi

Answer 3

I am getting the same error as defined above. but when I go to file in nodemodules/@types/GoogleMaps and open file index.d.ts. I see lot of functions there as shown in fig. for example we have a function bounds_changed: []; when I changed this function to bounds_changed:[''] it is working fine but we need an exact solution how to fix this because we are installing node modules every time when we create a build.

interface MapHandlerMap { /** * This event is fired when the viewport bounds have changed. * @see {@link https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed Maps JavaScript API} * @see {@link Map#getBounds} * @see {@link Map#fitBounds} * @see {@link Map#panToBounds} */ bounds_changed: [];

    /**
     * This event is fired when the map center property changes.
     * @see {@link https://developers.google.com/maps/documentation/javascript/reference/map#Map.center_changed Maps JavaScript API}
     * @see {@link MapOptions#center}
     * @see {@link Map#getCenter}
     * @see {@link Map#setCenter}
     */
    center_changed: [];

Pelasgian

thanks for your comment ! please share this question with other people – Drugi

How I can share with other peoples. This is a crucial issue. Our build was working fine before the last two days...we changed nothing and suddenly it stopped working – Pelasgian

i did exactly what you said and i still got one error : 'ERROR in node_modules/@types/googlemaps/index.d.ts(3308,76): error TS2370: A rest parameter must be of an array type' in this line : type MVCEventHandler<T extends MVCObject, A extends any[]> = (this: T, ...args: A) => void; how did u solve it ? – Drugi

@ZINEMahmoud to remove this error i replace this line with empty array like A extends any[]> = (this: T, ...args: A) => to A extends any[]> = [] – Pelasgian

i have fixed my problem ! without editing any index.d.ts. can you share with me the version you use in your package.json ==> "@types/googlemaps": ???? . just to be sure that we have the same prob – Drugi

I am using "@types/googlemaps": "^3.29.2",...but it is not version issue...I tried different versions – Pelasgian

i tried this version worked for me "@types/googlemaps": "3.37.7" with "@agm/core": "1.0.0-beta.3" try it – Drugi

I just tried but it did not work...Its not matter of version...It is something different isue – Pelasgian

Fixing "@types/googlemaps": "3.37.7" works for me as well. – Shayna

Answer 4

If you will git checkout this commit

b9cfc7f2cdf78a7f4b91a753d10865a2

you will see how they wrote this tutorial with your version of angular

https://github.com/angular-material-extensions/google-maps-autocomplete/commit/ba8c7c1a3fb717e8033a343aa27bc48fe7302f97#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

you can go to this page to find other angular versions if you will need in the future https://github.com/angular-material-extensions/google-maps-autocomplete/commits/master?after=02ef8485d57c520d5c36d657d7402c1ab4aad7c5+34&path%5B%5D=package.json

Hope this was helpful :)

Overfly