je viens de mettre à jour certains packages dans mon fichier package.json. Puis après avoir exécuté npm install
je cours ng serve
. Cependant, je reçois maintenant les erreurs suivantes.
ERROR in ... File '.../node_modules/@types/googlemaps/index.d.ts' is not a module.
... error TS6137: Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'
J'ai essayé la solution suggérée ici - @ types/googlemaps/index.d.ts 'n'est pas un module ajoutant /// <reference types="@types/googlemaps" />
en haut de mon fichier component.ts mais cela n'a pas résolu mon problème et l'erreur persiste.
package.json
{
"name": "demo",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.7",
"@angular/cdk": "^6.0.0",
"@angular/common": "^6.1.7",
"@angular/compiler": "^6.1.7",
"@angular/core": "^6.1.7",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "^6.1.7",
"@angular/http": "^6.1.7",
"@angular/material": "^6.0.0",
"@angular/platform-browser": "^6.1.7",
"@angular/platform-browser-dynamic": "^6.1.7",
"@angular/router": "^6.1.7",
"@auth0/angular-jwt": "^2.0.0",
"@types/chartjs": "0.0.31",
"@types/googlemaps": "^3.30.13",
"@types/lodash": "^4.14.108",
"auth0-js": "^9.5.1",
"auth0-lock": "^11.6.1",
"chart.js": "^2.7.2",
"chartjs-plugin-annotation": "^0.5.7",
"chartjs-plugin-datalabels": "^0.3.0",
"core-js": "^2.5.5",
"d3": "^5.1.0",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"json-formatter-js": "^2.2.0",
"lodash": "^4.17.10",
"lodash-es": "^4.17.10",
"moment": "^2.22.1",
"npm": "^6.0.0",
"progressbar.js": "^1.0.1",
"rxjs": "^6.3.2",
"rxjs-compat": "^6.1.0",
"ua-parser-js": "^0.7.18",
"wordcloud": "^1.1.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.0",
"@angular/cli": "6.2.2",
"@angular/compiler-cli": "^6.1.7",
"@angular/language-service": "^6.1.7",
"@types/d3": "^5.0.0",
"@types/d3-dsv": "^1.0.31",
"@types/jasmine": "~2.8.7",
"@types/jasminewd2": "~2.0.3",
"@types/lodash-es": "^4.17.0",
"@types/node": "~8.9.4",
"codelyzer": "^4.3.0",
"eslint": "^4.19.1",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.2",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.4.2",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^1.0.0",
"protractor": "~5.3.1",
"source-map-Explorer": "^1.5.0",
"ts-node": "~6.0.3",
"tslint": "~5.10.0",
"TypeScript": "~2.9.2"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"types": ["googlemaps"],
"lib": [
"es2017",
"dom"
]
}
}
component.ts
/// <reference types="@types/googlemaps" />
import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
import { } from '@types/googlemaps';
Vous n'avez probablement pas besoin de cette ligne dans votre fichier component.ts (c'est uniquement pour Angular <6):
import { } from '@types/googlemaps';
Voici un exemple (basique/minimal) pour Angular 6:
/// <reference types="@types/googlemaps" />
map: google.maps.Map;
this.map = new google.maps.Map(....);
Fondamentalement, si vous souhaitez l'utiliser dans Angular <6, vous devez l'ajouter via la méthode import
. Dans Angular 6+ vous devez l'ajouter via la méthode reference
. Vous ne devez pas ajouter les deux en même temps.
J'espère que je pourrais vous aider.
Pour Angular6 ~
npm install @types/googlemaps --save-dev
ou yarn add @types/googlemaps
"googlemaps"
à tsconfig.app.json
types tableau"googlemaps"
à tsconfig.spec.json
types tableau/// <reference types="@types/googlemaps" />
sur la première ligne de votre fichier component.ts. Cette ligne importera @ types/googlemaps. (Ligne 1 de l'exemple ci-dessous)declare let google: any;
(Ligne 6 de l'exemple ci-dessous)Réf:
J'ajoute juste la ligne suivante dans le chemin node_modules/@types/googlemaps/index.d.ts pour déclarer le module googlemaps:
declare module 'googlemaps';
puis ajouter import {} from 'googlemaps';
dans le fichier ts de votre composant.