angular - node_modules - types googlemaps example

@ types/googlemaps/index.d.ts ''no es un módulo

Question

Quiero usar la API de Google Maps con mi proyecto Angular, así que usé estos dos comandos para instalar paquetes npm:

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

Agregué esta línea a mi componente:

import {} from "@types/googlemaps";

Pero veo estos 2 errores en el código VS:

[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''.

Agregué estas líneas

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

a tsconfig.json y tsconfig.spec.json, pero aún así no hubo suerte. En Chrome Dev Tools, veo el siguiente error:

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

Versión angular 6 Typecript Versión 2.9.2

También probé desde Angular 5.

Answer 1

Acabo de crear un index.d.ts en mi carpeta src y agregué

declara el módulo ''googlemaps'';

Resolvió el problema

Answer 2

En mi proyecto Angular 7+

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

"types": [
      "googlemaps"
]

Gracias el siguiente enlace 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

Answer 3

En mi proyecto angular 6+, resolví el problema declarando el espacio de nombres de googlemaps en la parte superior del archivo de mecanografiado con esta línea:

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

Una vez hecho esto, no debe importar googlemaps de otras maneras y luego funciona. Use la ruta correcta a su carpeta node_modules.

Para obtener más información y referencias sobre el uso del espacio de nombres en Typecript aquí, la documentación .

Answer 4

Funciona bien

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

Answer 5

Gracias a este enlace de documentación: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] Solo tiene que agregar esta línea al principio (es decir, la línea 1, sin nada antes) de su archivo mecanografiado:

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

[Angular 5-] Solo tiene que agregar esta línea en cualquier lugar de las importaciones de su archivo de Script mecanografiado:

import {} from "googlemaps";

Gracias a la respuesta a continuación , es posible que también deba agregar un archivo <root>/index.d.ts contenga (aunque no lo necesitaba en mi caso):

declare module ''googlemaps'';

Answer 6

La importación se puede simplificar de la siguiente manera:

import {} from "googlemaps";

Cree un archivo en el directorio raíz de sus proyectos llamado index.d.ts y pegue lo siguiente:

declare module ''googlemaps'';

El archivo creado debe ubicarse en el directorio de la carpeta src

Encontré este artículo sobre cuál es el propósito de ese archivo

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

Answer 7

Para mí en Angular 6, funcionó cuando solo usaba

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