We Keep Coding

In Angular how do I access a global variable that is initialized in an iife?

I am pretty new to Angular, so please have patience. I am upgrading an app from Asp.net MVC5 to Angular, one of the things this application does is connect to a 3rd party system via downloading a javascript file from that 3rd party to establish credentials and communication through an object. It looks like the object is an iife, so as soon as the js file loads, the object is initialized. I have figured out a way to load the script dynamically in my component by adding it to the head of the document, the problem I am having is how to get a hold of that object in my component once the iife has executed. I know the external file is being loaded and the object initialized because I can see it in the dev tools on the browser. This JavaScript file is not something I can get from npm, or add in my assets folder and unfortunately that is all I am finding so far.

You can create a variable inside your component and modify the iife to set that variable with the data you want stored to it like this.
export class MyComponent{
MyNewVariable: string; //or make it whatever type you need
constructor(){}
(function(){
//do stuff
this.MyNewVariable = data; //data being whatever you want to store in the var
})();
}
Once that's done you can run another function that uses the data somehow.

How can I call a javascript function which is outside my angular App without importing it

In my angular app, by clicking on a button, I want to call a javascript function which is outside my angular app.
Also I think I can't really import the javascript into my angular app.
I'm trying to extend a platform actually, it has a main.ec78f7c1aff5e487c247.bundle.js script on a page which contains a method doSomething() that I want to use in my angular app which is imported on the same place.
(But I don't want, if this main is updated to update my import path anytime too, because the ec78f7c1aff5e487c247 would change then or?)
When I type window.location = 'javascript:doSomething("stringParamItNeeds")' in the browser console, the exact method that I need is called.
But I don't know how to do this inside my angular app. Can anyone help?

You need to make sure that the function which you want to call is available to your program (your Angular app). One of the ways is to register the function in global scope i.e. window object and then you will be able to access it in your program (Angular app).
For example -
"function demo () { }" is the one you want to call in your Angular app which is available in script file main.hash1.js
Step 1:
Register the function demo on the window object, window.demo = function() { ... };
Step 2:
In your angular app, you can simply call window.demo() or simply demo() function.
Step 3:
If you are using static type checking tools like Lint/Sonar etc, it may show error in your application that demo object is not available on window. You need to declare or mock the demo property on window object in you angular app code to solve the issue.

Hook function without direct reference

I try at the moment to hook a Javascript function in a WebGame.
The problem is that this function isn't available in the global DOM. The only way that I get it working, is to set a breakpoint in the browser debugger, override the function in the console and let it run again. Unfortunately the whole JS-Code is Obfuscated and loaded via a webpack lib.
My question is now, is there any way to find that function from outside or to automate the "breakpoint way"? I want to load my hook without to set manual a breakpoint.
I tried to find the function with that: Recursively search for a value in global variables and its properties but without success.

The Solution was to use greasemonkey and a simple python flask server.
The greasemonkey script prevent that the js file get load, instead its load the script from the flask server, that download the js and modify it.

How to access webpack created js functions in html

I have an express server that compiles handlebar files into html based on the route and I am using webpack to compile javascript files into one js file per page the user navigates to.
I am trying to access global functions that I defined in my javascript files from my html files to register onclick events and I can't seem to get it to work. The page loads fine
Here is the resulting HTML from the handlebars file:
<button onclick="OnButton_Open()">
Here is the function in the webpack compiled javascript:
OnButton_Open = function () {
here's my function
}
If I leave the function like above, the page loads, but when I click I get an error that it can't find OnButon_Open.
window.OnButton_Open = function () {
here's my function with the global prefix
}
If I prefix the function with window. which is what I thought that I had to do in this situation, I will actually get a reference error as the page loads that OnButon_Open is not defined. This is what the resulting webpack code looks like at the spot where I get the error:
/* harmony export (immutable) */ __webpack_exports__["OnButton_Open"] = OnButton_Open;
Is there a better way to make those functions accessible to the outside world? I'd happily put everything in the global scope for now until I can modularize this app a bit more.

Using Components.utils.import in a firefox extension

I am trying to create some global variables in a firefox extension. In my content folder, I have two javascript files:
1) Main JS file that holds the functions for the different events, etc
2) A file that stores only an object with the pieces of state I want to maintain. Also, I set the array EXPORTED_SYMBOLS.
I am having issues with the following line found in my main JS file:
Components.utils.import("resource:///globalVariables.js");
When it is at the top of the file, nothing seems to work. If I move it into the function where I need the variable, the rest of my code works, but the function with this line does nothing. Any advice that would help me with this problem would be great. Thanks

Chances are resource:///globalVariables.js is not the right URI. Make sure you register it properly, and include the aliasname when you reference it.