Can not read property 'prototype' of null bing maps and Angular4
1
i am trying to make and bing component in angular 4 and it wont let me render the map at all..
This is my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Microsoft</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental'></script>
</head>
<body onload="AppComponent.helloWorld()">
<div id="myMap"></div>
<app-root></app-root>
</body>
</html>
this is my component:
export class AppComponent implements OnInit {
@ViewChild('myMap') myMap;
title = 'app';
ngOnInit() {
if(Microsoft !== undefined){
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'key goes here'
});
}}
}
component HTML File:
<div #myMap style='width: 100%; height: 500px;'></div>
I don't know what i am doing wrong. but i can't get the map to load. it's throwing can not read property 'prototype' of null error.
javascript
angular typescript bing-maps edited Nov 16 '18 at 9:16
Michael B
88621235
asked Aug 22 '17 at 19:39
vineethvineeth
8410
add a comment |
1
i am trying to make and bing component in angular 4 and it wont let me render the map at all..
This is my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Microsoft</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental'></script>
</head>
<body onload="AppComponent.helloWorld()">
<div id="myMap"></div>
<app-root></app-root>
</body>
</html>
this is my component:
export class AppComponent implements OnInit {
@ViewChild('myMap') myMap;
title = 'app';
ngOnInit() {
if(Microsoft !== undefined){
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'key goes here'
});
}}
}
component HTML File:
<div #myMap style='width: 100%; height: 500px;'></div>
I don't know what i am doing wrong. but i can't get the map to load. it's throwing can not read property 'prototype' of null error.
javascript
angular typescript bing-maps edited Nov 16 '18 at 9:16
Michael B
88621235
asked Aug 22 '17 at 19:39
vineethvineeth
8410
What is onload="AppComponent.helloWorld() ? Does it run?
– Vega
Aug 22 '17 at 20:07
add a comment |
1
1
1
1
i am trying to make and bing component in angular 4 and it wont let me render the map at all..
This is my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Microsoft</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental'></script>
</head>
<body onload="AppComponent.helloWorld()">
<div id="myMap"></div>
<app-root></app-root>
</body>
</html>
this is my component:
export class AppComponent implements OnInit {
@ViewChild('myMap') myMap;
title = 'app';
ngOnInit() {
if(Microsoft !== undefined){
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'key goes here'
});
}}
}
component HTML File:
<div #myMap style='width: 100%; height: 500px;'></div>
I don't know what i am doing wrong. but i can't get the map to load. it's throwing can not read property 'prototype' of null error.
javascript
angular typescript bing-maps edited Nov 16 '18 at 9:16
Michael B
88621235
asked Aug 22 '17 at 19:39
vineethvineeth
8410
i am trying to make and bing component in angular 4 and it wont let me render the map at all..
This is my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Microsoft</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental'></script>
</head>
<body onload="AppComponent.helloWorld()">
<div id="myMap"></div>
<app-root></app-root>
</body>
</html>
this is my component:
export class AppComponent implements OnInit {
@ViewChild('myMap') myMap;
title = 'app';
ngOnInit() {
if(Microsoft !== undefined){
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'key goes here'
});
}}
}
component HTML File:
<div #myMap style='width: 100%; height: 500px;'></div>
I don't know what i am doing wrong. but i can't get the map to load. it's throwing can not read property 'prototype' of null error.
javascript
angular typescript bing-maps javascript
angular typescript bing-maps edited Nov 16 '18 at 9:16
Michael B
88621235
asked Aug 22 '17 at 19:39
vineethvineeth
8410
edited Nov 16 '18 at 9:16
Michael B
88621235
asked Aug 22 '17 at 19:39
vineethvineeth
8410
edited Nov 16 '18 at 9:16
Michael B
88621235
edited Nov 16 '18 at 9:16
Michael B
88621235
edited Nov 16 '18 at 9:16
Michael B
88621235
88621235
asked Aug 22 '17 at 19:39
vineethvineeth
8410
asked Aug 22 '17 at 19:39
vineethvineeth
8410
asked Aug 22 '17 at 19:39
vineethvineeth
8410
8410
What is onload="AppComponent.helloWorld() ? Does it run?
– Vega
Aug 22 '17 at 20:07
add a comment |
What is onload="AppComponent.helloWorld() ? Does it run?
– Vega
Aug 22 '17 at 20:07
What is onload="AppComponent.helloWorld() ? Does it run?
– Vega
Aug 22 '17 at 20:07
What is onload="AppComponent.helloWorld() ? Does it run?
– Vega
Aug 22 '17 at 20:07
add a comment |
3 Answers
3
active
oldest
votes
0
At the time ngOnInit() is executed, #myMap doesn't exists, so move the code to ngAfterViewChecked().
answered Aug 22 '17 at 20:03
VegaVega
13.9k113961
add a comment |
0
Elements queried with the @ViewChild decorator aren't available until the ngAfterViewInit() lifecycle check is ran. They will be undefined in ngOnInit(). Try moving that declaration to
ngAfterViewInit() {
if(Microsoft !== undefined){
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'key goes here'
});
}
}
Although I don't see in your code where the 'Microsoft' object is being defined. Are you importing that separately and you just didn't include it?
answered Aug 22 '17 at 20:13
diopsidediopside
1,607319
I did not include anything. Can you please tell me what i need to import? What do you mean by microsoft Object.
– vineeth
Aug 23 '17 at 14:43
Well, I'm not really sure what it is, I just know that 'Microsoft' is not a native object in typescript or angular... so it needs to be defined somewhere...In this line - if(Microsoft !== undefined) Its referring to a Microsoft object but its not clear where that object gets defined, if ever. I would assume its imported by that bing script tag, but you'd have to look at the source. Where did you get the code that you are currently using in the component?
– diopside
Aug 23 '17 at 14:46
I just used the script tag like you said and looked at the MSDN and there they used the new Microsoft.Maps.Maap( .... ) to initialize the map. I am doing the same thing. I did this with google maps and it worked perfectly fine. Now our company is asking to look into bing maps coz they have contracts with microsoft. soo ... anyways. i just declared the Microsoft at the top of the component like.. declare var MIcrosoft;
– vineeth
Aug 23 '17 at 14:50
Im still getting the same error. Im new to angular as you can tell.
– vineeth
Aug 23 '17 at 14:53
I just realized you included content from your 'index.html' file instead of your app.component.html' file. Your angular app won't be aware of many things that happen inside that index.html file after the app is bootstrapped, and I'm assuming it loads before that bing script is fully loaded. So it wont ever have any clue what that Microsoft namespace is regardless of when you check for it. You'd probably need to include the bing script in your package json file, and maybe define a new namespace for 'Microsoft' , otherwise typescript wont know what to do with it.
– diopside
Aug 23 '17 at 14:53
|
show 4 more comments
0
I finally figured it out. well, its actually my colleague.
So the idea is to wait till the document is ready and then load the component.
So in the app component:
disclaimer: Do not copy this code, It will not work. I am just free handing here.
@Component({
selector: 'app-root',
template: '<bing-maps *ngIf="ready"></bing-maps'
})
export class app implements onInit {
ready: boolean;
constructor() {}
ngOnInit(){
document.onreadystatechange = () => {
if(document.readyState === "complete"){
this.ready = true
}
}
}
}
thats the idea, in the bing-maps component you you have the div with the id="myMap" and in its onInit() you give the credentials.
answered Aug 24 '17 at 19:45
vineethvineeth
8410
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45825732%2fcan-not-read-property-prototype-of-null-bing-maps-and-angular4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
At the time ngOnInit() is executed, #myMap doesn't exists, so move the code to ngAfterViewChecked().
answered Aug 22 '17 at 20:03
VegaVega
13.9k113961
add a comment |
0
At the time ngOnInit() is executed, #myMap doesn't exists, so move the code to ngAfterViewChecked().
answered Aug 22 '17 at 20:03
VegaVega
13.9k113961
add a comment |
0
0
0
At the time ngOnInit() is executed, #myMap doesn't exists, so move the code to ngAfterViewChecked().
answered Aug 22 '17 at 20:03
VegaVega
13.9k113961
At the time ngOnInit() is executed, #myMap doesn't exists, so move the code to ngAfterViewChecked().
answered Aug 22 '17 at 20:03
VegaVega
13.9k113961
answered Aug 22 '17 at 20:03
VegaVega
13.9k113961
answered Aug 22 '17 at 20:03
VegaVega
13.9k113961
answered Aug 22 '17 at 20:03
VegaVega
13.9k113961
13.9k113961
add a comment |
add a comment |
0
Elements queried with the @ViewChild decorator aren't available until the ngAfterViewInit() lifecycle check is ran. They will be undefined in ngOnInit(). Try moving that declaration to
ngAfterViewInit() {
if(Microsoft !== undefined){
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'key goes here'
});
}
}
Although I don't see in your code where the 'Microsoft' object is being defined. Are you importing that separately and you just didn't include it?
answered Aug 22 '17 at 20:13
diopsidediopside
1,607319
I did not include anything. Can you please tell me what i need to import? What do you mean by microsoft Object.
– vineeth
Aug 23 '17 at 14:43
Well, I'm not really sure what it is, I just know that 'Microsoft' is not a native object in typescript or angular... so it needs to be defined somewhere...In this line - if(Microsoft !== undefined) Its referring to a Microsoft object but its not clear where that object gets defined, if ever. I would assume its imported by that bing script tag, but you'd have to look at the source. Where did you get the code that you are currently using in the component?
– diopside
Aug 23 '17 at 14:46
I just used the script tag like you said and looked at the MSDN and there they used the new Microsoft.Maps.Maap( .... ) to initialize the map. I am doing the same thing. I did this with google maps and it worked perfectly fine. Now our company is asking to look into bing maps coz they have contracts with microsoft. soo ... anyways. i just declared the Microsoft at the top of the component like.. declare var MIcrosoft;
– vineeth
Aug 23 '17 at 14:50
Im still getting the same error. Im new to angular as you can tell.
– vineeth
Aug 23 '17 at 14:53
I just realized you included content from your 'index.html' file instead of your app.component.html' file. Your angular app won't be aware of many things that happen inside that index.html file after the app is bootstrapped, and I'm assuming it loads before that bing script is fully loaded. So it wont ever have any clue what that Microsoft namespace is regardless of when you check for it. You'd probably need to include the bing script in your package json file, and maybe define a new namespace for 'Microsoft' , otherwise typescript wont know what to do with it.
– diopside
Aug 23 '17 at 14:53
|
show 4 more comments
0
Elements queried with the @ViewChild decorator aren't available until the ngAfterViewInit() lifecycle check is ran. They will be undefined in ngOnInit(). Try moving that declaration to
ngAfterViewInit() {
if(Microsoft !== undefined){
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'key goes here'
});
}
}
Although I don't see in your code where the 'Microsoft' object is being defined. Are you importing that separately and you just didn't include it?
answered Aug 22 '17 at 20:13
diopsidediopside
1,607319
I did not include anything. Can you please tell me what i need to import? What do you mean by microsoft Object.
– vineeth
Aug 23 '17 at 14:43
Well, I'm not really sure what it is, I just know that 'Microsoft' is not a native object in typescript or angular... so it needs to be defined somewhere...In this line - if(Microsoft !== undefined) Its referring to a Microsoft object but its not clear where that object gets defined, if ever. I would assume its imported by that bing script tag, but you'd have to look at the source. Where did you get the code that you are currently using in the component?
– diopside
Aug 23 '17 at 14:46
I just used the script tag like you said and looked at the MSDN and there they used the new Microsoft.Maps.Maap( .... ) to initialize the map. I am doing the same thing. I did this with google maps and it worked perfectly fine. Now our company is asking to look into bing maps coz they have contracts with microsoft. soo ... anyways. i just declared the Microsoft at the top of the component like.. declare var MIcrosoft;
– vineeth
Aug 23 '17 at 14:50
Im still getting the same error. Im new to angular as you can tell.
– vineeth
Aug 23 '17 at 14:53
I just realized you included content from your 'index.html' file instead of your app.component.html' file. Your angular app won't be aware of many things that happen inside that index.html file after the app is bootstrapped, and I'm assuming it loads before that bing script is fully loaded. So it wont ever have any clue what that Microsoft namespace is regardless of when you check for it. You'd probably need to include the bing script in your package json file, and maybe define a new namespace for 'Microsoft' , otherwise typescript wont know what to do with it.
– diopside
Aug 23 '17 at 14:53
|
show 4 more comments
0
0
0
Elements queried with the @ViewChild decorator aren't available until the ngAfterViewInit() lifecycle check is ran. They will be undefined in ngOnInit(). Try moving that declaration to
ngAfterViewInit() {
if(Microsoft !== undefined){
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'key goes here'
});
}
}
Although I don't see in your code where the 'Microsoft' object is being defined. Are you importing that separately and you just didn't include it?
answered Aug 22 '17 at 20:13
diopsidediopside
1,607319
Elements queried with the @ViewChild decorator aren't available until the ngAfterViewInit() lifecycle check is ran. They will be undefined in ngOnInit(). Try moving that declaration to
ngAfterViewInit() {
if(Microsoft !== undefined){
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'key goes here'
});
}
}
Although I don't see in your code where the 'Microsoft' object is being defined. Are you importing that separately and you just didn't include it?
answered Aug 22 '17 at 20:13
diopsidediopside
1,607319
answered Aug 22 '17 at 20:13
diopsidediopside
1,607319
answered Aug 22 '17 at 20:13
diopsidediopside
1,607319
answered Aug 22 '17 at 20:13
diopsidediopside
1,607319
1,607319
I did not include anything. Can you please tell me what i need to import? What do you mean by microsoft Object.
– vineeth
Aug 23 '17 at 14:43
Well, I'm not really sure what it is, I just know that 'Microsoft' is not a native object in typescript or angular... so it needs to be defined somewhere...In this line - if(Microsoft !== undefined) Its referring to a Microsoft object but its not clear where that object gets defined, if ever. I would assume its imported by that bing script tag, but you'd have to look at the source. Where did you get the code that you are currently using in the component?
– diopside
Aug 23 '17 at 14:46
I just used the script tag like you said and looked at the MSDN and there they used the new Microsoft.Maps.Maap( .... ) to initialize the map. I am doing the same thing. I did this with google maps and it worked perfectly fine. Now our company is asking to look into bing maps coz they have contracts with microsoft. soo ... anyways. i just declared the Microsoft at the top of the component like.. declare var MIcrosoft;
– vineeth
Aug 23 '17 at 14:50
Im still getting the same error. Im new to angular as you can tell.
– vineeth
Aug 23 '17 at 14:53
I just realized you included content from your 'index.html' file instead of your app.component.html' file. Your angular app won't be aware of many things that happen inside that index.html file after the app is bootstrapped, and I'm assuming it loads before that bing script is fully loaded. So it wont ever have any clue what that Microsoft namespace is regardless of when you check for it. You'd probably need to include the bing script in your package json file, and maybe define a new namespace for 'Microsoft' , otherwise typescript wont know what to do with it.
– diopside
Aug 23 '17 at 14:53
|
show 4 more comments
I did not include anything. Can you please tell me what i need to import? What do you mean by microsoft Object.
– vineeth
Aug 23 '17 at 14:43
Well, I'm not really sure what it is, I just know that 'Microsoft' is not a native object in typescript or angular... so it needs to be defined somewhere...In this line - if(Microsoft !== undefined) Its referring to a Microsoft object but its not clear where that object gets defined, if ever. I would assume its imported by that bing script tag, but you'd have to look at the source. Where did you get the code that you are currently using in the component?
– diopside
Aug 23 '17 at 14:46
I just used the script tag like you said and looked at the MSDN and there they used the new Microsoft.Maps.Maap( .... ) to initialize the map. I am doing the same thing. I did this with google maps and it worked perfectly fine. Now our company is asking to look into bing maps coz they have contracts with microsoft. soo ... anyways. i just declared the Microsoft at the top of the component like.. declare var MIcrosoft;
– vineeth
Aug 23 '17 at 14:50
Im still getting the same error. Im new to angular as you can tell.
– vineeth
Aug 23 '17 at 14:53
I just realized you included content from your 'index.html' file instead of your app.component.html' file. Your angular app won't be aware of many things that happen inside that index.html file after the app is bootstrapped, and I'm assuming it loads before that bing script is fully loaded. So it wont ever have any clue what that Microsoft namespace is regardless of when you check for it. You'd probably need to include the bing script in your package json file, and maybe define a new namespace for 'Microsoft' , otherwise typescript wont know what to do with it.
– diopside
Aug 23 '17 at 14:53
I did not include anything. Can you please tell me what i need to import? What do you mean by microsoft Object.
– vineeth
Aug 23 '17 at 14:43
I did not include anything. Can you please tell me what i need to import? What do you mean by microsoft Object.
– vineeth
Aug 23 '17 at 14:43
Well, I'm not really sure what it is, I just know that 'Microsoft' is not a native object in typescript or angular... so it needs to be defined somewhere...In this line - if(Microsoft !== undefined) Its referring to a Microsoft object but its not clear where that object gets defined, if ever. I would assume its imported by that bing script tag, but you'd have to look at the source. Where did you get the code that you are currently using in the component?
– diopside
Aug 23 '17 at 14:46
Well, I'm not really sure what it is, I just know that 'Microsoft' is not a native object in typescript or angular... so it needs to be defined somewhere...In this line - if(Microsoft !== undefined) Its referring to a Microsoft object but its not clear where that object gets defined, if ever. I would assume its imported by that bing script tag, but you'd have to look at the source. Where did you get the code that you are currently using in the component?
– diopside
Aug 23 '17 at 14:46
I just used the script tag like you said and looked at the MSDN and there they used the new Microsoft.Maps.Maap( .... ) to initialize the map. I am doing the same thing. I did this with google maps and it worked perfectly fine. Now our company is asking to look into bing maps coz they have contracts with microsoft. soo ... anyways. i just declared the Microsoft at the top of the component like.. declare var MIcrosoft;
– vineeth
Aug 23 '17 at 14:50
I just used the script tag like you said and looked at the MSDN and there they used the new Microsoft.Maps.Maap( .... ) to initialize the map. I am doing the same thing. I did this with google maps and it worked perfectly fine. Now our company is asking to look into bing maps coz they have contracts with microsoft. soo ... anyways. i just declared the Microsoft at the top of the component like.. declare var MIcrosoft;
– vineeth
Aug 23 '17 at 14:50
Im still getting the same error. Im new to angular as you can tell.
– vineeth
Aug 23 '17 at 14:53
Im still getting the same error. Im new to angular as you can tell.
– vineeth
Aug 23 '17 at 14:53
I just realized you included content from your 'index.html' file instead of your app.component.html' file. Your angular app won't be aware of many things that happen inside that index.html file after the app is bootstrapped, and I'm assuming it loads before that bing script is fully loaded. So it wont ever have any clue what that Microsoft namespace is regardless of when you check for it. You'd probably need to include the bing script in your package json file, and maybe define a new namespace for 'Microsoft' , otherwise typescript wont know what to do with it.
– diopside
Aug 23 '17 at 14:53
I just realized you included content from your 'index.html' file instead of your app.component.html' file. Your angular app won't be aware of many things that happen inside that index.html file after the app is bootstrapped, and I'm assuming it loads before that bing script is fully loaded. So it wont ever have any clue what that Microsoft namespace is regardless of when you check for it. You'd probably need to include the bing script in your package json file, and maybe define a new namespace for 'Microsoft' , otherwise typescript wont know what to do with it.
– diopside
Aug 23 '17 at 14:53
|
show 4 more comments
0
I finally figured it out. well, its actually my colleague.
So the idea is to wait till the document is ready and then load the component.
So in the app component:
disclaimer: Do not copy this code, It will not work. I am just free handing here.
@Component({
selector: 'app-root',
template: '<bing-maps *ngIf="ready"></bing-maps'
})
export class app implements onInit {
ready: boolean;
constructor() {}
ngOnInit(){
document.onreadystatechange = () => {
if(document.readyState === "complete"){
this.ready = true
}
}
}
}
thats the idea, in the bing-maps component you you have the div with the id="myMap" and in its onInit() you give the credentials.
answered Aug 24 '17 at 19:45
vineethvineeth
8410
add a comment |
0
I finally figured it out. well, its actually my colleague.
So the idea is to wait till the document is ready and then load the component.
So in the app component:
disclaimer: Do not copy this code, It will not work. I am just free handing here.
@Component({
selector: 'app-root',
template: '<bing-maps *ngIf="ready"></bing-maps'
})
export class app implements onInit {
ready: boolean;
constructor() {}
ngOnInit(){
document.onreadystatechange = () => {
if(document.readyState === "complete"){
this.ready = true
}
}
}
}
thats the idea, in the bing-maps component you you have the div with the id="myMap" and in its onInit() you give the credentials.
answered Aug 24 '17 at 19:45
vineethvineeth
8410
add a comment |
0
0
0
I finally figured it out. well, its actually my colleague.
So the idea is to wait till the document is ready and then load the component.
So in the app component:
disclaimer: Do not copy this code, It will not work. I am just free handing here.
@Component({
selector: 'app-root',
template: '<bing-maps *ngIf="ready"></bing-maps'
})
export class app implements onInit {
ready: boolean;
constructor() {}
ngOnInit(){
document.onreadystatechange = () => {
if(document.readyState === "complete"){
this.ready = true
}
}
}
}
thats the idea, in the bing-maps component you you have the div with the id="myMap" and in its onInit() you give the credentials.
answered Aug 24 '17 at 19:45
vineethvineeth
8410
I finally figured it out. well, its actually my colleague.
So the idea is to wait till the document is ready and then load the component.
So in the app component:
disclaimer: Do not copy this code, It will not work. I am just free handing here.
@Component({
selector: 'app-root',
template: '<bing-maps *ngIf="ready"></bing-maps'
})
export class app implements onInit {
ready: boolean;
constructor() {}
ngOnInit(){
document.onreadystatechange = () => {
if(document.readyState === "complete"){
this.ready = true
}
}
}
}
thats the idea, in the bing-maps component you you have the div with the id="myMap" and in its onInit() you give the credentials.
answered Aug 24 '17 at 19:45
vineethvineeth
8410
answered Aug 24 '17 at 19:45
vineethvineeth
8410
answered Aug 24 '17 at 19:45
vineethvineeth
8410
answered Aug 24 '17 at 19:45
vineethvineeth
8410
8410
add a comment |
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.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45825732%2fcan-not-read-property-prototype-of-null-bing-maps-and-angular4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is onload="AppComponent.helloWorld() ? Does it run?
– Vega
Aug 22 '17 at 20:07