web-dev-qa-db-fra.com

L'application angulaire 6 ne peut pas trouver l'espace de noms 'google'

Cette question est apparue de la même manière dans de nombreux endroits où la solution consiste simplement à ajouter

import { } from '@types/googlemaps';

qui a fonctionné comme une solution dans la version antérieure de angular. Le problème est apparu maintenant que j'utilise Angular 6+ 

TS2304: Cannot find name 'google'.
TS2503: Cannot find namespace 'google'.

Il y a de nombreuses erreurs comme celle-ci, mais cela se produit à chaque ligne comme:

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

Je peux résoudre le problème en insérant // @ts-ignore au-dessus de toutes les lignes qui utilisent Google Maps, mais je suis beaucoup plus intéressé par une véritable solution. Mais le fait que cela fonctionne me fait penser que c'est un problème de tsconfig sur lequel je ne suis pas très confiant.

Je peux confirmer que googlemaps est installé à l'intérieur de node_modules/@ types, mais 

ts.config

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types",
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

J'ai créé un Stackblitz Example qui génère une erreur de référence si vous affichez la console. Je ne sais pas quoi essayer ensuite.

angulartypescriptnamespacestsconfig
6
Murphy4

Alors je suis tombé sur le problème plus tôt dans github et cela a fonctionné pour moi 

  • npm installer --save-dev @ types/googlemaps

  • Ajout à tous mes tsconfig * .json: types: ["googlemaps"]

  • Ajout en haut de mon fichier: declare const google: any;

  • Ajout à la fin du corps de mon index.html:

<script async defer type = "text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=****"> </ script>

essayez-le et dites-moi si cela fonctionne

14
Vaibhav Kumar Goyal

J'ai trouvé quelque chose, si vous utilisez AGM, vous pouvez le réparer en important:

import {} from '@agm/core/services/google-maps-types';
2
Edd Núñez

Le fichier tsconfig.json qui doit vraiment être mis à jour se trouve dans src/tsconfig.app.json.

Ces fichiers remplacent la propriété types de compilerOptions du fichier tsconfig.json dans le répertoire racine avec un tableau vide. Vous devez donc y ajouter la définition des types pour googlemaps.

Par exemple:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["googlemaps"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

0
Robert Tamlyn