@types/googlemaps/index.d.ts' is not a module

I want to use the Google Maps API with my Angular project, so I used these two commands to install npm packages:

npm install @agm/core --save-dev

npm install @types/googlemaps --save-dev

I added this line to my component:

import {} from "@types/googlemaps";

But I see these 2 errors in 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'.

I added these lines

"types": ["googlemaps"]

"moduleResolution": "node"

to tsconfig.json and tsconfig.spec.json, but still no luck. On Chrome Dev Tools, I see the below error:

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

TypeError: Cannot read property 'Autocomplete' of undefined

Angular version 6
Typescript Version 2.9.2

I tried from Angular 5, too.

edited Jul 18 '18 at 22:48

TylerH

15.4k105067

asked Jun 28 '18 at 13:54

AMendis

16124

1

Please pick one of the answers as correct.
– rmcsharry
Dec 5 '18 at 7:03

add a comment |

I want to use the Google Maps API with my Angular project, so I used these two commands to install npm packages:

npm install @agm/core --save-dev

npm install @types/googlemaps --save-dev

I added this line to my component:

import {} from "@types/googlemaps";

But I see these 2 errors in 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'.

I added these lines

"types": ["googlemaps"]

"moduleResolution": "node"

to tsconfig.json and tsconfig.spec.json, but still no luck. On Chrome Dev Tools, I see the below error:

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

TypeError: Cannot read property 'Autocomplete' of undefined

Angular version 6
Typescript Version 2.9.2

I tried from Angular 5, too.

edited Jul 18 '18 at 22:48

TylerH

15.4k105067

asked Jun 28 '18 at 13:54

AMendis

16124

1

Please pick one of the answers as correct.
– rmcsharry
Dec 5 '18 at 7:03

add a comment |

I want to use the Google Maps API with my Angular project, so I used these two commands to install npm packages:

npm install @agm/core --save-dev

npm install @types/googlemaps --save-dev

I added this line to my component:

import {} from "@types/googlemaps";

But I see these 2 errors in 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'.

I added these lines

"types": ["googlemaps"]

"moduleResolution": "node"

to tsconfig.json and tsconfig.spec.json, but still no luck. On Chrome Dev Tools, I see the below error:

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

TypeError: Cannot read property 'Autocomplete' of undefined

Angular version 6
Typescript Version 2.9.2

I tried from Angular 5, too.

edited Jul 18 '18 at 22:48

TylerH

15.4k105067

asked Jun 28 '18 at 13:54

AMendis

16124

I want to use the Google Maps API with my Angular project, so I used these two commands to install npm packages:

npm install @agm/core --save-dev

npm install @types/googlemaps --save-dev

I added this line to my component:

import {} from "@types/googlemaps";

But I see these 2 errors in 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'.

I added these lines

"types": ["googlemaps"]

"moduleResolution": "node"

to tsconfig.json and tsconfig.spec.json, but still no luck. On Chrome Dev Tools, I see the below error:

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

TypeError: Cannot read property 'Autocomplete' of undefined

Angular version 6
Typescript Version 2.9.2

I tried from Angular 5, too.

angular typescript angular-cli angular-cli-v6

edited Jul 18 '18 at 22:48

TylerH

15.4k105067

asked Jun 28 '18 at 13:54

AMendis

16124

edited Jul 18 '18 at 22:48

TylerH

15.4k105067

asked Jun 28 '18 at 13:54

AMendis

16124

edited Jul 18 '18 at 22:48

TylerH

15.4k105067

edited Jul 18 '18 at 22:48

TylerH

15.4k105067

edited Jul 18 '18 at 22:48

TylerH

15.4k105067

asked Jun 28 '18 at 13:54

AMendis

16124

asked Jun 28 '18 at 13:54

AMendis

16124

asked Jun 28 '18 at 13:54

AMendis

16124

1

Please pick one of the answers as correct.
– rmcsharry
Dec 5 '18 at 7:03

add a comment |

1

Please pick one of the answers as correct.
– rmcsharry
Dec 5 '18 at 7:03

Please pick one of the answers as correct.
– rmcsharry
Dec 5 '18 at 7:03

add a comment |

3 Answers
3

active

oldest

votes

Thanks to this documentation link : https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] You only have to add this line at the beginning (meaning line 1, with nothing before) of your Typescript file :

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

[Angular 5-] You only have to add this line anywhere in your Typescript file imports :

import {} from "googlemaps";

Thanks to the answer below, you may also need to add a file <root>/index.d.ts containing (didn't need it though in my case) :

declare module 'googlemaps';

edited Dec 6 '18 at 9:12

answered Jul 4 '18 at 8:27

Cétia

10.2k34875

3

Where should I add this line ? in my component ts file ? or html file ?
– AMendis
Jul 5 '18 at 14:00

8

The triple slash works, but WHY doesn't the normal import statement work? It's this kind of crap that just makes Angular painful to work with.
– Steven Hoff
Jul 11 '18 at 21:47

2

What? Why did this work?! What the heck? Umm... thanks?
– WebWanderer
Aug 9 '18 at 14:21

2

The Angular 6+ option may not be a good idea, TS docs say: --- Use these directives only when you’re authoring a d.ts file by hand.--- So it´s not supposed to be used in ".ts" file, only "d.ts" files.
– guillefd
Aug 11 '18 at 15:29

1

For [Angular 6+] it only worked with adding at beginning of my Typescript file: /// <reference types="@types/googlemaps" /> (with "@types/" added).
– Florian D.
Aug 12 '18 at 0:45

|
show 9 more comments

Your import can be simplified as follows:

import {} from "googlemaps";

Add a file at your projects root directory named index.d.ts and insert the following:

declare module 'googlemaps';

edited Jan 1 at 11:31

answered Sep 29 '18 at 18:11

Stephen Paul

14.9k84745

Downvoter, I'm curious, did this not work for you?
– Stephen Paul
Sep 29 '18 at 18:53

Just tried this approach (on Vue.js) project and it worked, bear in mind for my case I needed to place this hack under the src/ folder, one level down from tsconfig
– Val Redchenko
Nov 18 '18 at 15:40

This worked for me on Angular 6 - needed to do both. I think this should be the recommended answer.
– rmcsharry
Dec 5 '18 at 7:02

add a comment |

I just created a index.d.ts in my src folder and added

declare module 'googlemaps';

It solved the issue

answered Dec 31 '18 at 8:59

Cool Coder

328

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51084724%2ftypes-googlemaps-index-d-ts-is-not-a-module%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Thanks to this documentation link : https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] You only have to add this line at the beginning (meaning line 1, with nothing before) of your Typescript file :

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

[Angular 5-] You only have to add this line anywhere in your Typescript file imports :

import {} from "googlemaps";

Thanks to the answer below, you may also need to add a file <root>/index.d.ts containing (didn't need it though in my case) :

declare module 'googlemaps';

edited Dec 6 '18 at 9:12

answered Jul 4 '18 at 8:27

Cétia

10.2k34875

3

Where should I add this line ? in my component ts file ? or html file ?
– AMendis
Jul 5 '18 at 14:00

8

The triple slash works, but WHY doesn't the normal import statement work? It's this kind of crap that just makes Angular painful to work with.
– Steven Hoff
Jul 11 '18 at 21:47

2

What? Why did this work?! What the heck? Umm... thanks?
– WebWanderer
Aug 9 '18 at 14:21

2

The Angular 6+ option may not be a good idea, TS docs say: --- Use these directives only when you’re authoring a d.ts file by hand.--- So it´s not supposed to be used in ".ts" file, only "d.ts" files.
– guillefd
Aug 11 '18 at 15:29

1

For [Angular 6+] it only worked with adding at beginning of my Typescript file: /// <reference types="@types/googlemaps" /> (with "@types/" added).
– Florian D.
Aug 12 '18 at 0:45

|
show 9 more comments

Thanks to this documentation link : https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] You only have to add this line at the beginning (meaning line 1, with nothing before) of your Typescript file :

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

[Angular 5-] You only have to add this line anywhere in your Typescript file imports :

import {} from "googlemaps";

Thanks to the answer below, you may also need to add a file <root>/index.d.ts containing (didn't need it though in my case) :

declare module 'googlemaps';

edited Dec 6 '18 at 9:12

answered Jul 4 '18 at 8:27

Cétia

10.2k34875

3

Where should I add this line ? in my component ts file ? or html file ?
– AMendis
Jul 5 '18 at 14:00

8

The triple slash works, but WHY doesn't the normal import statement work? It's this kind of crap that just makes Angular painful to work with.
– Steven Hoff
Jul 11 '18 at 21:47

2

What? Why did this work?! What the heck? Umm... thanks?
– WebWanderer
Aug 9 '18 at 14:21

2

The Angular 6+ option may not be a good idea, TS docs say: --- Use these directives only when you’re authoring a d.ts file by hand.--- So it´s not supposed to be used in ".ts" file, only "d.ts" files.
– guillefd
Aug 11 '18 at 15:29

1

For [Angular 6+] it only worked with adding at beginning of my Typescript file: /// <reference types="@types/googlemaps" /> (with "@types/" added).
– Florian D.
Aug 12 '18 at 0:45

|
show 9 more comments

Thanks to this documentation link : https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] You only have to add this line at the beginning (meaning line 1, with nothing before) of your Typescript file :

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

[Angular 5-] You only have to add this line anywhere in your Typescript file imports :

import {} from "googlemaps";

Thanks to the answer below, you may also need to add a file <root>/index.d.ts containing (didn't need it though in my case) :

declare module 'googlemaps';

edited Dec 6 '18 at 9:12

answered Jul 4 '18 at 8:27

Cétia

10.2k34875

Thanks to this documentation link : https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] You only have to add this line at the beginning (meaning line 1, with nothing before) of your Typescript file :

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

[Angular 5-] You only have to add this line anywhere in your Typescript file imports :

import {} from "googlemaps";

Thanks to the answer below, you may also need to add a file <root>/index.d.ts containing (didn't need it though in my case) :

declare module 'googlemaps';

edited Dec 6 '18 at 9:12

answered Jul 4 '18 at 8:27

Cétia

10.2k34875

edited Dec 6 '18 at 9:12

answered Jul 4 '18 at 8:27

Cétia

10.2k34875

answered Jul 4 '18 at 8:27

Cétia

10.2k34875

answered Jul 4 '18 at 8:27

Cétia

10.2k34875

3

Where should I add this line ? in my component ts file ? or html file ?
– AMendis
Jul 5 '18 at 14:00

8

The triple slash works, but WHY doesn't the normal import statement work? It's this kind of crap that just makes Angular painful to work with.
– Steven Hoff
Jul 11 '18 at 21:47

2

What? Why did this work?! What the heck? Umm... thanks?
– WebWanderer
Aug 9 '18 at 14:21

2

The Angular 6+ option may not be a good idea, TS docs say: --- Use these directives only when you’re authoring a d.ts file by hand.--- So it´s not supposed to be used in ".ts" file, only "d.ts" files.
– guillefd
Aug 11 '18 at 15:29

1

For [Angular 6+] it only worked with adding at beginning of my Typescript file: /// <reference types="@types/googlemaps" /> (with "@types/" added).
– Florian D.
Aug 12 '18 at 0:45

|
show 9 more comments

3

Where should I add this line ? in my component ts file ? or html file ?
– AMendis
Jul 5 '18 at 14:00

8

The triple slash works, but WHY doesn't the normal import statement work? It's this kind of crap that just makes Angular painful to work with.
– Steven Hoff
Jul 11 '18 at 21:47

2

What? Why did this work?! What the heck? Umm... thanks?
– WebWanderer
Aug 9 '18 at 14:21

2

The Angular 6+ option may not be a good idea, TS docs say: --- Use these directives only when you’re authoring a d.ts file by hand.--- So it´s not supposed to be used in ".ts" file, only "d.ts" files.
– guillefd
Aug 11 '18 at 15:29

1

For [Angular 6+] it only worked with adding at beginning of my Typescript file: /// <reference types="@types/googlemaps" /> (with "@types/" added).
– Florian D.
Aug 12 '18 at 0:45

Where should I add this line ? in my component ts file ? or html file ?
– AMendis
Jul 5 '18 at 14:00

The triple slash works, but WHY doesn't the normal import statement work? It's this kind of crap that just makes Angular painful to work with.
– Steven Hoff
Jul 11 '18 at 21:47

What? Why did this work?! What the heck? Umm... thanks?
– WebWanderer
Aug 9 '18 at 14:21

The Angular 6+ option may not be a good idea, TS docs say: --- Use these directives only when you’re authoring a d.ts file by hand.--- So it´s not supposed to be used in ".ts" file, only "d.ts" files.
– guillefd
Aug 11 '18 at 15:29

For [Angular 6+] it only worked with adding at beginning of my Typescript file: /// <reference types="@types/googlemaps" /> (with "@types/" added).
– Florian D.
Aug 12 '18 at 0:45

|
show 9 more comments

Your import can be simplified as follows:

import {} from "googlemaps";

Add a file at your projects root directory named index.d.ts and insert the following:

declare module 'googlemaps';

edited Jan 1 at 11:31

answered Sep 29 '18 at 18:11

Stephen Paul

14.9k84745

Downvoter, I'm curious, did this not work for you?
– Stephen Paul
Sep 29 '18 at 18:53

Just tried this approach (on Vue.js) project and it worked, bear in mind for my case I needed to place this hack under the src/ folder, one level down from tsconfig
– Val Redchenko
Nov 18 '18 at 15:40

This worked for me on Angular 6 - needed to do both. I think this should be the recommended answer.
– rmcsharry
Dec 5 '18 at 7:02

add a comment |

Your import can be simplified as follows:

import {} from "googlemaps";

Add a file at your projects root directory named index.d.ts and insert the following:

declare module 'googlemaps';

edited Jan 1 at 11:31

answered Sep 29 '18 at 18:11

Stephen Paul

14.9k84745

Downvoter, I'm curious, did this not work for you?
– Stephen Paul
Sep 29 '18 at 18:53

Just tried this approach (on Vue.js) project and it worked, bear in mind for my case I needed to place this hack under the src/ folder, one level down from tsconfig
– Val Redchenko
Nov 18 '18 at 15:40

This worked for me on Angular 6 - needed to do both. I think this should be the recommended answer.
– rmcsharry
Dec 5 '18 at 7:02

add a comment |

Your import can be simplified as follows:

import {} from "googlemaps";

Add a file at your projects root directory named index.d.ts and insert the following:

declare module 'googlemaps';

edited Jan 1 at 11:31

answered Sep 29 '18 at 18:11

Stephen Paul

14.9k84745

Your import can be simplified as follows:

import {} from "googlemaps";

Add a file at your projects root directory named index.d.ts and insert the following:

declare module 'googlemaps';

edited Jan 1 at 11:31

answered Sep 29 '18 at 18:11

Stephen Paul

14.9k84745

edited Jan 1 at 11:31

answered Sep 29 '18 at 18:11

Stephen Paul

14.9k84745

answered Sep 29 '18 at 18:11

Stephen Paul

14.9k84745

answered Sep 29 '18 at 18:11

Stephen Paul

14.9k84745

Downvoter, I'm curious, did this not work for you?
– Stephen Paul
Sep 29 '18 at 18:53

Just tried this approach (on Vue.js) project and it worked, bear in mind for my case I needed to place this hack under the src/ folder, one level down from tsconfig
– Val Redchenko
Nov 18 '18 at 15:40

This worked for me on Angular 6 - needed to do both. I think this should be the recommended answer.
– rmcsharry
Dec 5 '18 at 7:02

add a comment |

Downvoter, I'm curious, did this not work for you?
– Stephen Paul
Sep 29 '18 at 18:53

Just tried this approach (on Vue.js) project and it worked, bear in mind for my case I needed to place this hack under the src/ folder, one level down from tsconfig
– Val Redchenko
Nov 18 '18 at 15:40

This worked for me on Angular 6 - needed to do both. I think this should be the recommended answer.
– rmcsharry
Dec 5 '18 at 7:02

Downvoter, I'm curious, did this not work for you?
– Stephen Paul
Sep 29 '18 at 18:53

Just tried this approach (on Vue.js) project and it worked, bear in mind for my case I needed to place this hack under the src/ folder, one level down from tsconfig
– Val Redchenko
Nov 18 '18 at 15:40

This worked for me on Angular 6 - needed to do both. I think this should be the recommended answer.
– rmcsharry
Dec 5 '18 at 7:02

add a comment |

I just created a index.d.ts in my src folder and added

declare module 'googlemaps';

It solved the issue

answered Dec 31 '18 at 8:59

Cool Coder

328

add a comment |

I just created a index.d.ts in my src folder and added

declare module 'googlemaps';

It solved the issue

answered Dec 31 '18 at 8:59

Cool Coder

328

add a comment |

I just created a index.d.ts in my src folder and added

declare module 'googlemaps';

It solved the issue

answered Dec 31 '18 at 8:59

Cool Coder

328

I just created a index.d.ts in my src folder and added

declare module 'googlemaps';

It solved the issue

answered Dec 31 '18 at 8:59

Cool Coder

328

answered Dec 31 '18 at 8:59

Cool Coder

328

answered Dec 31 '18 at 8:59

Cool Coder

328

answered Dec 31 '18 at 8:59

Cool Coder

328

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk