Angular 6 - run javascript method outside the app
I have an angular 6 app which will be embed inside another application. That application injects javascript to the browser in order to expose certain functionalities to the angular app.
As an example, when i run my angular app inside the mentioned application, if i go to the web console, i can execute the following js method
API.callService("Special Service");
and works fine.
How can i execute the same inside the angular app ?
i tried the following in the component
declare var API: any;
and then at ngAfterViewInit() method
API.callService("Special Service");
but i get an error as API is undefined.
As extra information, i can use the chrome dev tools for the embed browser. If i want to run the javascript method i just do..
And that works fine ! The issue is to do the same call from the Angular component.
Any idea how to solve it ?
Thanks!
javascript angular
asked Nov 22 at 16:59
federom
4882511
add a comment |
I have an angular 6 app which will be embed inside another application. That application injects javascript to the browser in order to expose certain functionalities to the angular app.
As an example, when i run my angular app inside the mentioned application, if i go to the web console, i can execute the following js method
API.callService("Special Service");
and works fine.
How can i execute the same inside the angular app ?
i tried the following in the component
declare var API: any;
and then at ngAfterViewInit() method
API.callService("Special Service");
but i get an error as API is undefined.
As extra information, i can use the chrome dev tools for the embed browser. If i want to run the javascript method i just do..
And that works fine ! The issue is to do the same call from the Angular component.
Any idea how to solve it ?
Thanks!
javascript angular
asked Nov 22 at 16:59
federom
4882511
what is this API object which you are calling ?
– Vaibhav Kumar Goyal
Nov 22 at 17:25
it is a javascript API object injected by the shell app that embed the angular app
– federom
Nov 22 at 19:20
add a comment |
I have an angular 6 app which will be embed inside another application. That application injects javascript to the browser in order to expose certain functionalities to the angular app.
As an example, when i run my angular app inside the mentioned application, if i go to the web console, i can execute the following js method
API.callService("Special Service");
and works fine.
How can i execute the same inside the angular app ?
i tried the following in the component
declare var API: any;
and then at ngAfterViewInit() method
API.callService("Special Service");
but i get an error as API is undefined.
As extra information, i can use the chrome dev tools for the embed browser. If i want to run the javascript method i just do..
And that works fine ! The issue is to do the same call from the Angular component.
Any idea how to solve it ?
Thanks!
javascript angular
asked Nov 22 at 16:59
federom
4882511
I have an angular 6 app which will be embed inside another application. That application injects javascript to the browser in order to expose certain functionalities to the angular app.
As an example, when i run my angular app inside the mentioned application, if i go to the web console, i can execute the following js method
API.callService("Special Service");
and works fine.
How can i execute the same inside the angular app ?
i tried the following in the component
declare var API: any;
and then at ngAfterViewInit() method
API.callService("Special Service");
but i get an error as API is undefined.
As extra information, i can use the chrome dev tools for the embed browser. If i want to run the javascript method i just do..
And that works fine ! The issue is to do the same call from the Angular component.
Any idea how to solve it ?
Thanks!
javascript angular
javascript angular
asked Nov 22 at 16:59
federom
4882511
asked Nov 22 at 16:59
federom
4882511
edited Nov 22 at 19:26
asked Nov 22 at 16:59
federom
4882511
asked Nov 22 at 16:59
federom
4882511
asked Nov 22 at 16:59
federom
4882511
4882511
what is this API object which you are calling ?
– Vaibhav Kumar Goyal
Nov 22 at 17:25
it is a javascript API object injected by the shell app that embed the angular app
– federom
Nov 22 at 19:20
add a comment |
what is this API object which you are calling ?
– Vaibhav Kumar Goyal
Nov 22 at 17:25
it is a javascript API object injected by the shell app that embed the angular app
– federom
Nov 22 at 19:20
what is this API object which you are calling ?
– Vaibhav Kumar Goyal
Nov 22 at 17:25
what is this API object which you are calling ?
– Vaibhav Kumar Goyal
Nov 22 at 17:25
it is a javascript API object injected by the shell app that embed the angular app
– federom
Nov 22 at 19:20
it is a javascript API object injected by the shell app that embed the angular app
– federom
Nov 22 at 19:20
add a comment |
3 Answers
3
active
oldest
votes
I hope this help you
declare var API: any;
You are saying API as any value, so you get undefined;
Try on your constructor or ngAfterViewInit
this.API = API.callService("Special Service");
answered Nov 22 at 17:36
David Santos
307
Hi david, if i do that it wont work. if i need to do this.API, API should be an attribute of the component class. If i call both the same, the issue is that when trying to assign the API.callService result to the component attribute, it will fail, as API is still undefined (in that case API != this.API)
– federom
Nov 22 at 19:22
add a comment |
You need to export your javascript functions, then you can require them in your angular module.
Of course, you'll need to be able or have the right to modify the original javascript file to add the module exports declarations.
To use the 'require' function in an angular component, you'll need to run :
$ npm install @types/node
Then in tsconfig.json, under the "typeRoots" property, add :
"types": ["node"],
Here is a quick example here: https://stackblitz.com/edit/angular-qphccu
answered Nov 22 at 17:29
dun32
14215
I tried a similar approach, it does work when doing an alert, but not when you are trying to execute the injected function
– federom
Nov 22 at 19:21
I've edited the original post with more information about the issue
– federom
Nov 22 at 19:26
Well, normally, if it works for an alert, it should work for more, am I wrong ? Everything depend on the way you export the injected functions and the data going with it.
– dun32
Nov 22 at 20:57
add a comment |
All,
I found the issue
Despite of the fact i was calling the api in the ngAfterViewInit, it seems that the api was not available.
i tried with
setTimeout(()=>this.click(), 1000);
click(){
var result = SrwOSGiApi.callOSGIService("com.sabre.edge.platform.core.sso.base.IAgentProfileService","getPcc", null);
}
and works fine !!
Thanks!!
answered Nov 22 at 21:04
federom
4882511
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
});
}
});
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%2f53435497%2fangular-6-run-javascript-method-outside-the-app%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
I hope this help you
declare var API: any;
You are saying API as any value, so you get undefined;
Try on your constructor or ngAfterViewInit
this.API = API.callService("Special Service");
answered Nov 22 at 17:36
David Santos
307
Hi david, if i do that it wont work. if i need to do this.API, API should be an attribute of the component class. If i call both the same, the issue is that when trying to assign the API.callService result to the component attribute, it will fail, as API is still undefined (in that case API != this.API)
– federom
Nov 22 at 19:22
add a comment |
I hope this help you
declare var API: any;
You are saying API as any value, so you get undefined;
Try on your constructor or ngAfterViewInit
this.API = API.callService("Special Service");
answered Nov 22 at 17:36
David Santos
307
Hi david, if i do that it wont work. if i need to do this.API, API should be an attribute of the component class. If i call both the same, the issue is that when trying to assign the API.callService result to the component attribute, it will fail, as API is still undefined (in that case API != this.API)
– federom
Nov 22 at 19:22
add a comment |
I hope this help you
declare var API: any;
You are saying API as any value, so you get undefined;
Try on your constructor or ngAfterViewInit
this.API = API.callService("Special Service");
answered Nov 22 at 17:36
David Santos
307
I hope this help you
declare var API: any;
You are saying API as any value, so you get undefined;
Try on your constructor or ngAfterViewInit
this.API = API.callService("Special Service");
answered Nov 22 at 17:36
David Santos
307
answered Nov 22 at 17:36
David Santos
307
answered Nov 22 at 17:36
David Santos
307
answered Nov 22 at 17:36
David Santos
307
307
Hi david, if i do that it wont work. if i need to do this.API, API should be an attribute of the component class. If i call both the same, the issue is that when trying to assign the API.callService result to the component attribute, it will fail, as API is still undefined (in that case API != this.API)
– federom
Nov 22 at 19:22
add a comment |
Hi david, if i do that it wont work. if i need to do this.API, API should be an attribute of the component class. If i call both the same, the issue is that when trying to assign the API.callService result to the component attribute, it will fail, as API is still undefined (in that case API != this.API)
– federom
Nov 22 at 19:22
Hi david, if i do that it wont work. if i need to do this.API, API should be an attribute of the component class. If i call both the same, the issue is that when trying to assign the API.callService result to the component attribute, it will fail, as API is still undefined (in that case API != this.API)
– federom
Nov 22 at 19:22
Hi david, if i do that it wont work. if i need to do this.API, API should be an attribute of the component class. If i call both the same, the issue is that when trying to assign the API.callService result to the component attribute, it will fail, as API is still undefined (in that case API != this.API)
– federom
Nov 22 at 19:22
add a comment |
You need to export your javascript functions, then you can require them in your angular module.
Of course, you'll need to be able or have the right to modify the original javascript file to add the module exports declarations.
To use the 'require' function in an angular component, you'll need to run :
$ npm install @types/node
Then in tsconfig.json, under the "typeRoots" property, add :
"types": ["node"],
Here is a quick example here: https://stackblitz.com/edit/angular-qphccu
answered Nov 22 at 17:29
dun32
14215
I tried a similar approach, it does work when doing an alert, but not when you are trying to execute the injected function
– federom
Nov 22 at 19:21
I've edited the original post with more information about the issue
– federom
Nov 22 at 19:26
Well, normally, if it works for an alert, it should work for more, am I wrong ? Everything depend on the way you export the injected functions and the data going with it.
– dun32
Nov 22 at 20:57
add a comment |
You need to export your javascript functions, then you can require them in your angular module.
Of course, you'll need to be able or have the right to modify the original javascript file to add the module exports declarations.
To use the 'require' function in an angular component, you'll need to run :
$ npm install @types/node
Then in tsconfig.json, under the "typeRoots" property, add :
"types": ["node"],
Here is a quick example here: https://stackblitz.com/edit/angular-qphccu
answered Nov 22 at 17:29
dun32
14215
I tried a similar approach, it does work when doing an alert, but not when you are trying to execute the injected function
– federom
Nov 22 at 19:21
I've edited the original post with more information about the issue
– federom
Nov 22 at 19:26
Well, normally, if it works for an alert, it should work for more, am I wrong ? Everything depend on the way you export the injected functions and the data going with it.
– dun32
Nov 22 at 20:57
add a comment |
You need to export your javascript functions, then you can require them in your angular module.
Of course, you'll need to be able or have the right to modify the original javascript file to add the module exports declarations.
To use the 'require' function in an angular component, you'll need to run :
$ npm install @types/node
Then in tsconfig.json, under the "typeRoots" property, add :
"types": ["node"],
Here is a quick example here: https://stackblitz.com/edit/angular-qphccu
answered Nov 22 at 17:29
dun32
14215
You need to export your javascript functions, then you can require them in your angular module.
Of course, you'll need to be able or have the right to modify the original javascript file to add the module exports declarations.
To use the 'require' function in an angular component, you'll need to run :
$ npm install @types/node
Then in tsconfig.json, under the "typeRoots" property, add :
"types": ["node"],
Here is a quick example here: https://stackblitz.com/edit/angular-qphccu
answered Nov 22 at 17:29
dun32
14215
answered Nov 22 at 17:29
dun32
14215
answered Nov 22 at 17:29
dun32
14215
answered Nov 22 at 17:29
dun32
14215
14215
I tried a similar approach, it does work when doing an alert, but not when you are trying to execute the injected function
– federom
Nov 22 at 19:21
I've edited the original post with more information about the issue
– federom
Nov 22 at 19:26
Well, normally, if it works for an alert, it should work for more, am I wrong ? Everything depend on the way you export the injected functions and the data going with it.
– dun32
Nov 22 at 20:57
add a comment |
I tried a similar approach, it does work when doing an alert, but not when you are trying to execute the injected function
– federom
Nov 22 at 19:21
I've edited the original post with more information about the issue
– federom
Nov 22 at 19:26
Well, normally, if it works for an alert, it should work for more, am I wrong ? Everything depend on the way you export the injected functions and the data going with it.
– dun32
Nov 22 at 20:57
I tried a similar approach, it does work when doing an alert, but not when you are trying to execute the injected function
– federom
Nov 22 at 19:21
I tried a similar approach, it does work when doing an alert, but not when you are trying to execute the injected function
– federom
Nov 22 at 19:21
I've edited the original post with more information about the issue
– federom
Nov 22 at 19:26
I've edited the original post with more information about the issue
– federom
Nov 22 at 19:26
Well, normally, if it works for an alert, it should work for more, am I wrong ? Everything depend on the way you export the injected functions and the data going with it.
– dun32
Nov 22 at 20:57
Well, normally, if it works for an alert, it should work for more, am I wrong ? Everything depend on the way you export the injected functions and the data going with it.
– dun32
Nov 22 at 20:57
add a comment |
All,
I found the issue
Despite of the fact i was calling the api in the ngAfterViewInit, it seems that the api was not available.
i tried with
setTimeout(()=>this.click(), 1000);
click(){
var result = SrwOSGiApi.callOSGIService("com.sabre.edge.platform.core.sso.base.IAgentProfileService","getPcc", null);
}
and works fine !!
Thanks!!
answered Nov 22 at 21:04
federom
4882511
add a comment |
All,
I found the issue
Despite of the fact i was calling the api in the ngAfterViewInit, it seems that the api was not available.
i tried with
setTimeout(()=>this.click(), 1000);
click(){
var result = SrwOSGiApi.callOSGIService("com.sabre.edge.platform.core.sso.base.IAgentProfileService","getPcc", null);
}
and works fine !!
Thanks!!
answered Nov 22 at 21:04
federom
4882511
add a comment |
All,
I found the issue
Despite of the fact i was calling the api in the ngAfterViewInit, it seems that the api was not available.
i tried with
setTimeout(()=>this.click(), 1000);
click(){
var result = SrwOSGiApi.callOSGIService("com.sabre.edge.platform.core.sso.base.IAgentProfileService","getPcc", null);
}
and works fine !!
Thanks!!
answered Nov 22 at 21:04
federom
4882511
All,
I found the issue
Despite of the fact i was calling the api in the ngAfterViewInit, it seems that the api was not available.
i tried with
setTimeout(()=>this.click(), 1000);
click(){
var result = SrwOSGiApi.callOSGIService("com.sabre.edge.platform.core.sso.base.IAgentProfileService","getPcc", null);
}
and works fine !!
Thanks!!
answered Nov 22 at 21:04
federom
4882511
answered Nov 22 at 21:04
federom
4882511
answered Nov 22 at 21:04
federom
4882511
answered Nov 22 at 21:04
federom
4882511
4882511
add a comment |
add a comment |
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.
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%2f53435497%2fangular-6-run-javascript-method-outside-the-app%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 this API object which you are calling ?
– Vaibhav Kumar Goyal
Nov 22 at 17:25
it is a javascript API object injected by the shell app that embed the angular app
– federom
Nov 22 at 19:20