web-dev-qa-db-fra.com

@ types/googlemaps/index.d.ts 'n'est pas un module

Je souhaite utiliser l'API Google Maps avec mon projet Angular. J'ai donc utilisé ces deux commandes pour installer les packages npm:

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

J'ai ajouté cette ligne à mon composant:

import {} from "@types/googlemaps";

Mais je vois ces 2 erreurs dans 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'.

J'ai ajouté ces lignes 

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

tsconfig.json et tsconfig.spec.json, mais toujours pas de chance. Sur Chrome Dev Tools, je vois l'erreur ci-dessous:

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

Version angulaire 6 TypeScript version 2.9.2

J'ai aussi essayé Angular 5.

angulartypescriptangular-cliangular-cli-v6
37
AMendis

Grâce à ce lien de documentation: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] Il vous suffit d'ajouter cette ligne au début (signifiant ligne 1, avec rien avant) de votre fichier TypeScript:

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

[Angular 5-] Il vous suffit d'ajouter cette ligne n'importe où dans vos importations de fichiers TypeScript:

import {} from "googlemaps";

Grâce à la réponse ci-dessous , vous devrez peut-être aussi ajouter un fichier <root>/index.d.ts contenant (je n'en ai pas eu besoin dans mon cas):

declare module 'googlemaps';
73
Cétia

Votre importation peut être simplifiée comme suit: 

import {} from "googlemaps";

Ajoutez un fichier dans le répertoire racine de vos projets nommé index.d.ts et collez le texte suivant: 

declare module 'googlemaps';
16
Stephen Paul

Je viens de créer un fichier index.d.ts dans mon dossier src et j'ai ajouté

déclarer le module 'googlemaps';

Il a résolu le problème

5
Cool Coder

Dans mon projet angulaire 6+, j'ai résolu le problème de la déclaration de l'espace de noms googlemaps en haut du fichier TypeScript avec cette ligne:

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

avec cela fait, vous ne devez pas importer googlemaps autrement. Cela fonctionne ensuite. Utilisez le chemin correct vers votre dossier node_modules.

Pour plus d'informations et de références sur l'utilisation des espaces de noms dans TypeScript ici, la documentation .

3
Giovanni Bertoncelli

Pour moi dans Angular 6, cela fonctionnait quand je seulement 

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