@types/googlemaps/index.d.ts'는 모듈이 아닙니다.

@types/googlemaps/index.d.ts'는 모듈이 아닙니다.

Google 지도 API를 Angular 프로젝트와 함께 사용하고 싶어서 다음 두 가지 명령을 사용하여 npm 패키지를 설치했습니다.

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

구성 요소에 다음 행을 추가했습니다.

import {} from "@types/googlemaps";

하지만 VS Code에 다음 두 가지 오류가 있습니다.

[ts] File 'h:/Angular Projects/Breakfast/client/breakfast/node_modules/@types/googlemaps/index.d.ts' is not a module.
[ts] Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'.

이 대사들을 추가했습니다.

"types": ["googlemaps"]
"moduleResolution": "node"

tsconfig.json 및 tsconfig.spec.json에 연결되었지만 여전히 운이 없습니다.Chrome Dev Tools에서 다음 오류가 나타납니다.

Error: Uncaught (in promise): TypeError: Cannot read property 'Autocomplete' of undefined
TypeError: Cannot read property 'Autocomplete' of undefined

Angular 버전 6 유형 스크립트 버전 2.9.2

Angular 5에서도 해봤어요.

이 설명서 링크 덕분에 다음 링크가 제공합니다. https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] Typescript 파일의 시작 부분(앞에 아무것도 없음)에 다음 행만 추가하면 됩니다.

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

[Angular 5-] 이 행은 Typescript 파일 가져오기의 아무 곳에나 추가하면 됩니다.

import {} from "googlemaps";

아래 답변 덕분에 파일을 추가해야 할 수도 있습니다.<root>/index.d.ts포함(내 경우에는 필요하지 않음):

declare module 'googlemaps';

가져오기는 다음과 같이 단순화할 수 있습니다.

import {} from "googlemaps";

프로젝트 루트 디렉터리에 이름이 지정된 파일을 만듭니다.index.d.ts다음을 붙여넣습니다.

declare module 'googlemaps';

생성된 파일은 디렉토리에 있어야 합니다.src폴더

저는 그 파일의 목적이 무엇인지에 대한 이 기사를 찾았습니다.

https://www.bennadel.com/blog/3169-adding-custom-typings-files-d-ts-in-an-angular-2-typescript-application.htm

Angular 7+ 프로젝트에서

$ npm install @types/googlemaps --save-dev
Intsconfig.app.json

"types": [
      "googlemaps"
]

https://www.freakyjolly.com/angular-7-6-add-google-maps-in-angular-2-plus-applications-using-angular-google-maps-module-agm-core-easily/ #more-2316 아래 링크에 감사드립니다.

방금 src 폴더에 index.d.ts를 만들고 추가했습니다.

모듈을 '구글 맵'이라고 선언합니다.

그것은 그 문제를 해결했습니다.

잘 작동합니다.

npm install --save-dev @types/googlemaps
At the beggining of your component file, type:
/// <reference types="@types/googlemaps" />

Angular 6에 있는 저에게, 그것은 오직 사용할 때만 작동했습니다.

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

나의 각진 6+ 프로젝트에서 나는 다음 행으로 유형 스크립트 파일의 맨 위에 구글맵 네임스페이스를 선언하는 문제를 해결했습니다.

/// <reference path="../../../../../../node_modules/@types/googlemaps/index.d.ts"/>

이렇게 하면 다른 방법으로 Google 지도를 가져오면 안 됩니다. 그러면 작동합니다.node_modules 폴더의 올바른 경로를 사용합니다.

유형 스크립트의 네임스페이스 사용에 대한 자세한 내용과 참조는 설명서를 참조하십시오.

나는 이 솔루션을 시도해 보았습니다. 패키지에서 편집할 필요가 없었고 누군가 분류 없이 작성했기 때문에 최고라고 생각합니다.

1. npm install @types/googlemaps --save-dev
2. 더하다"compilerOptions": { "types": ["googlemaps"] } .json filtsconfig.app.json 파일
3. 제거하는 것을 잊지 마십시오.import {} from 'googlemaps';당신의 코드로부터.

참고: 서버를 다시 시작해야 합니다.ng serve

다음과 같은 방법으로 이 오류를 방지할 수 있습니다.

설치한 후

npm 설치 @types/google 지도 --save-dev

src/tsconfig.app.json으로 이동하여 다음 행을 추가합니다.

"compilerOptions": {
    ...,
    "types": [
         "googlemaps"
    ],
    ...,
},

그것은 근본적인 것이 아닙니다.node_modules/@types/googlemaps/index.d.ts라는 코드를 이 파일에 추가하기만 하면 됩니다.

declare module 'googlemaps';

    import { MapsAPILoader } from '@agm/core';
    declare var google;
    
    
     constructor(private mapsAPILoader: MapsAPILoader) {
         this.mapsAPILoader.load().then(() => {
              var mapProp = {
                center: new google.maps.LatLng(9.93040049002793, -84.09062837772197),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
            });
        
          }
    
    //Hope it helps

우리는 이미 가지고 있었습니다.

"typeRoots": [
  "node_modules/@types"
],

그래서 추가하는 중

declare var google;

우리가 모듈에 추가해야 하는 것이 전부였습니까?

언급URL : https://stackoverflow.com/questions/51084724/types-googlemaps-index-d-ts-is-not-a-module