ERROR in node_modules/@types/googlemaps/index.d.ts -- 元组类型元素列表不能为空

Question

同时尝试将 angular google 地图 - agm 图书馆整合到我的 angular 项目我得到了这个错误：

某些配置有问题，或者我错过了一些我在这个项目中使用 material 6 和 angular 6 感谢您的帮助

在终端控制台中

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.

这是我所做的：

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

解决方案： 我不知道为什么以及如何回滚到旧版本对我有用！但这不是我寻找的正确解决方案

Answer 1

如果你愿意 git 检查这个提交

b9cfc7f2cdf78a7f4b91a753d10865a2

您将看到他们如何使用您的 angular

版本编写本教程

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

如果您以后需要，可以到此页面查找其他 angular 版本 https://github.com/angular-material-extensions/google-maps-autocomplete/commits/master?after=02ef8485d57c520d5c36d657d7402c1ab4aad7c5+34&path%5B%5D=package.json

希望这对您有所帮助:)

Answer 2

我收到与上面定义的相同的错误。但是当我转到 nodemodules/@types/GoogleMaps 中的文件并打开文件 index.d.ts 时。如图所示，我在那里看到了很多功能。例如我们有一个函数 bounds_changed: [];当我将此函数更改为 bounds_changed:[''] 时，它工作正常，但我们需要一个确切的解决方案来解决这个问题，因为我们每次创建构建时都在安装节点模块。

接口MapHandlerMap { /** * 当视口边界发生变化时会触发此事件。 * @see {@link https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed 地图 JavaScript API} * @see {@link 地图#getBounds} * @see {@link 地图#fitBounds} * @see {@link 地图#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: [];

Answer 3

您需要返回到可用的版本。

在您的 package.json 文件中，具体选择一个旧版本：

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

Answer 4

降级您的 googlemapps 版本 https://www.npmjs.com/package/@types/googlemaps/v/3.38.0

运行命令npm i @types/googlemaps@3.38.0

ERROR in node_modules/@types/googlemaps/index.d.ts -- 元组类型元素列表不能为空

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

angular

angular-material

angular-google-maps