Angular2找不到命名空间'google'

Posted

技术标签:

【中文标题】Angular2找不到命名空间\'google\'【英文标题】:Angular2 Cannot find namespace 'google'Angular2找不到命名空间'google' 【发布时间】:2017-07-12 16:36:03 【问题描述】:

我正在使用angular2-google-maps 和最新版本的 Angular2。我正在尝试将一些本地地图组件功能转换为他们自己的文件maps.service.ts 中的服务。例如:

map.component.ts

getGeoLocation(lat: number, lng: number) 
if (navigator.geolocation) 
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request =  latLng: latlng ;
    geocoder.geocode(request, (results, status) => 
      if (status == google.maps.GeocoderStatus.OK) 
        let result = results[0];
        if (result != null) 
          this.fillInputs(result.formatted_address);
         else 
          alert("No address available!");
        
      
    );


变成类似:maps.service.ts

getGeoLocation(lat: number, lng: number): Observable<google.maps.GeocoderResult[]> 
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request =  latLng: latlng ;
    return new Observable((observer: Observer<google.maps.GeocoderResult[]>) => 
        geocoder.geocode( request , (
            (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => 
                if (status == google.maps.GeocoderStatus.OK) 
                    observer.next(results);
                    observer.complete();
                 else 
                    console.log('Geocoding service failed due to: ' +status);
                    observer.error(status);
                
            
        ));
    );

我遇到的问题是,当我尝试使用 Observer&lt;google.maps.GeocoderResult[]&gt; 时,google 变量未被识别。我在服务类之外也有declare var google: any;

google 变量在我的map.componenet.ts 中有效,但在maps.service.ts 中无法识别。

【问题讨论】:

你在哪里导入google @GünterZöchbauer 在 AppModule 中:` AgmCoreModule.forRoot( apiKey: '--key--', libraries: ['places'] )` 您还需要一个提供google 的TypeScript 导入。似乎您从某处复制了代码。可以发个链接吗? 我添加了` AgmCoreModule 似乎没有提供与Geocoder 相关的任何内容 【参考方案1】:

Angular 6 和 7 步骤(应该也适用于所有其他 Angular 版本):

    npm install @types/googlemaps --save-dev 分别在tsconfig.app.json 中的tsconfig.spec.json 中将googlemaps 添加到类型数组中 重启 npm 服务器

最后应该是这样的:

您可以从组件中删除这两种声明类型:import from '@types/googlemaps';declare var google: any; 您不必包含其中任何一个。

PS:如果您使用的是 agm-s GoogleMapsAPIWrapper.getNativeMap(),您必须在使用之前转换地图对象。比如开启流量层:

this.apiWrapper.getNativeMap().then(map => 
    this.trafficLayer = new google.maps.TrafficLayer();
    const gMap: any = map;
    this.trafficLayer.setMap(gMap as google.maps.Map);
);

【讨论】:

该死的,我仍然收到error TS2503: Cannot find namespace 'google'.,我只需要添加"compilerOptions": "types": ["googlemaps"],对吧?对我不起作用..:/ 好吧,我必须重新启动ng server 然后它工作了! 我发现我还必须将我的 Google 地图 也适用于 angular 5! 在这里使用 Angular 7。谢谢!【参考方案2】:

我也遇到了同样的问题 我试过了:

declare var google: any;

但这对我不起作用。 我找到了这个answer,它对我有用。首先确保你安装了谷歌地图的类型npm install @types/googlemaps --save --dev

--dev 标志已弃用。使用npm install @types/googlemaps --save-dev

然后在你的控制器中

import  from '@types/googlemaps';

【讨论】:

Typescript linting 似乎不再喜欢import from '@types/googlemaps';,但建议:import from 'googlemaps' 有人能解释一下(或者更好地把我带到 ts 文档页面)这个“空”导入。尽管如此,它看起来像未使用的导入。想知道为什么这有帮助...【参考方案3】:

为了防止其他人因这个问题而遭受更多痛苦。

npm install @google/maps

https://www.npmjs.com/package/@google/maps

那么:

import  google  from '@google/maps';

基本上我们是从包@google/maps 中导入google 对象。

@types/googlemaps 停止工作后于 2018 年测试。

【讨论】:

注意:我必须将declare var google: any 与此技术结合使用。 为我工作,没有任何declare var google: any 看起来那个包现在已经被弃用了,取而代之的是@googlemaps/google-maps-services-js 我必须添加“declare var google: any;”让它发挥作用。【参考方案4】:

添加

declare var google: any;

TypeScript 导入后

另见https://github.com/SebastianM/angular2-google-maps/issues/689

【讨论】:

【参考方案5】:
ERROR: [ts] Cannot import type declaration files. Consider importing ‘googlemaps’ instead of ‘@types/googlemaps’

解决方案:将import from ‘@types/googlemaps’;更改为

/// <reference types=”@types/googlemaps” />

ERROR: while compiling, error TS2304: Cannot find name ‘google’.

解决方案:在@types/googlemaps 参考下方添加declare var google: any;


ERROR: while compiling error TS2503: Cannot find namespace ‘google’.

解决方案:添加到 tsconfig.app.json :"types": ["googlemaps"] 然后重启


错误:地图无法正确加载,在 Web 浏览器控制台中,您 阅读“Google Maps javascript API 警告:NoApiKeys”

解决方案:在 index.html 的 javascript 文件中添加一个有效的 api 键,应该 看起来像这样 &lt;script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"&gt;&lt;/script&gt; 您可以从这里获取 API 密钥 https://developers.google.com/maps/documentation/javascript/get-api-key


ERROR:Cannot find name 'google'

好吧,如果您刚刚安装了以下类型:

npm i -D @types/google.maps

并且您尝试使用它们。有时在 tsconfig.app.json 中有空类型数组,这会阻止自动导入。删除 "types": [] 并且可以工作。它曾经对我有用。

【讨论】:

显示所有可能性的好答案,包括为我修复它的可能性 - tsconfig.app.json,它也避免安装@google/maps 别忘了重启你的开发环境。我发现这是获得参考所必需的。【参考方案6】:

它也对我有用:

首先在项目根目录的cmd中安装typings用于谷歌地图

npm install @types/googlemaps --save --dev

然后在下面添加您的.ts 组件文件:

import  from '@types/googlemaps';

【讨论】:

【参考方案7】:

就我而言,我遇到了两种类型的错误:

找不到命名空间 google 找不到名称 google

因为在我的代码中我正在使用:

let autocomplete = new google.maps.places.Autocomplete(...)

let place: google.maps.places.PlaceResult = autocomplete.getPlace();

所以通过添加这个来修复它:

declare var google: any;

declare namespace google.maps.places 
    export interface PlaceResult  geometry 

【讨论】:

【参考方案8】:

我在使用 Angular 6 时遇到了类似的问题,我做了上面提到的所有可能的解决方案,但没有运气。 最后,我设法通过在tsconfig.apptsconfig.spec 文件中的types 中添加googlemaps 来解决这个问题。 希望对其他人有所帮助。

【讨论】:

【参考方案9】:

直接解决方案,将“googlemaps”添加到 tsconfig.app.json 中的类型数组。而且我不需要声明任何东西,声明 var google: any;。只需在 tsconfig 中添加 googlemaps 即可。

"types": ["googlemaps"]

【讨论】:

【参考方案10】:

如果有人为此苦苦挣扎,因为即使在安装类型并将它们添加到 tsconfig 之后,Webstorm 也取消了代码...重新启动 Webstorm。我花了一个小时。

【讨论】:

【参考方案11】:

注意为我解决了这个问题。 在遵循最高评价的答案后仍然没有工作,只有在添加这个之后才能工作

npm i @types/googlemaps@3.39.13 --save-dev

确保在 ng serve 之前运行它,并确保在服务器运行时重新启动它。

【讨论】:

【参考方案12】:

安装reference

npm i -D @types/google.maps

将此行添加到您的 Typescript 文件的开头(即第 1 行,之前没有任何内容):

/// <reference types="@types/google.maps" />

Triple Slash Documentation

Source

【讨论】:

【参考方案13】:
`
import  Observable  from 'rxjs';
import  GoogleMapsAPIWrapper, MapsAPILoader  from '@agm/core';
import  Injectable, NgZone  from '@angular/core';
declare var google: any;

@Injectable(
  providedIn: 'root'
)
export class MapService extends GoogleMapsAPIWrapper 
  geocoder: Promise<any>;
  constructor(private __loader: MapsAPILoader, private __zone: NgZone) 
    super(__loader, __zone);
    this.geocoder = this.__loader.load().then(() => new google.maps.Geocoder());
  

  getLatLan(address: string): Observable<any> 
    return Observable.create(observer => 
      this.geocoder.then((geocoder) => 
        geocoder.geocode( 'address': address , (results, status) => 
          if (status === google.maps.GeocoderStatus.OK) 
            observer.next(results[0].geometry.location);
            observer.complete();
           else 
            console.error('Error - ', results, ' & Status - ', status);
            observer.next();
            observer.complete();
          
        );
      );
    );
  
`

这是一个服务,带有获取地址并返回 lan 和 lat 的方法。

【讨论】:

以上是关于Angular2找不到命名空间'google'的主要内容,如果未能解决你的问题,请参考以下文章

在 ionic 3 应用程序中找不到命名空间“google”

webpack升级后找不到命名空间NodeJS

在使用模块 xlsx 样式时找不到命名空间 XLSX

有问题,找不到类型或命名空间名称“List”

text tinyrefl解析器错误,找不到全局命名空间中的命名空间

找不到 XmlTextReader/XmlNodeType 命名空间,如何解决?