Import javascript Module in Angular 13 - javascript

I need to implement a Map API in an Angular 13 project but I have just a Javascript file. Apparently it's based on TypeScript then easily importable but I don't know how...
The file starts by this code :
!function() {
function e(t, n, i) {
function r(a, s) {
if (!n[a]) {
if (!t[a]) {
var l = "function" == typeof require && require;
if (!s && l)
return l(a, !0);
if (o)
return o(a, !0);
var u = new Error("Cannot find module '" + a + "'");
throw u.code = "MODULE_NOT_FOUND",
u
}
var h = n[a] = {
exports: {}
};
t[a][0].call(h.exports, function(e) {
var n = t[a][1][e];
return r(n || e)
}, h, h.exports, e, t, n, i)
}
return n[a].exports
}
for (var o = "function" == typeof require && require, a = 0; a < i.length; a++)
r(i[a]);
return r
}
return e
}()({
In the documentation, I need just do this :
var map = new f4.map.Map('#map');
But f4 is undefined...
How i can do this ?
Thanks

Related

wkhtmltopdf jQuery.Deferred exception: 'null' is not an object

I used Doxygen to create documentation in HTML and now I am trying to convert the HTML files to PDF using wkhtmltopdf but encountered the below error.
The PDF is generated but content is all blank.
I am using wkhtmltopdf 0.12.6 (with patched qt), Doxygen 1.9.4
The jQuery file should be the standard javascript that is generated from Doxygen step.
wkhtmltopdf --debug-javascript --enable-local-file-access *.html output.pdf
Loading pages (1/6)
Warning: file:///C:/Users/Downloads/Mik/html/jquery.js:2 jQuery.Deferred exception: 'null' is not an object
Warning: undefined:0 TypeError: 'null' is not an object
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done
S.extend({
Deferred: function(e) {
var o = [
["notify", "progress", S.Callbacks("memory"), S.Callbacks("memory"), 2],
["resolve", "done", S.Callbacks("once memory"), S.Callbacks("once memory"), 0, "resolved"],
["reject", "fail", S.Callbacks("once memory"), S.Callbacks("once memory"), 1, "rejected"]
],
i = "pending",
a = {
state: function() {
return i
},
always: function() {
return s.done(arguments).fail(arguments), this
},
"catch": function(e) {
return a.then(null, e)
},
pipe: function() {
var i = arguments;
return S.Deferred(function(r) {
S.each(o, function(e, t) {
var n = m(i[t[4]]) && i[t[4]];
s[t[1]](function() {
var e = n && n.apply(this, arguments);
e && m(e.promise) ? e.promise().progress(r.notify).done(r.resolve).fail(r.reject) : r[t[0] + "With"](this, n ? [e] : arguments)
})
}), i = null
}).promise()
},
then: function(t, n, r) {
var u = 0;
function l(i, o, a, s) {
return function() {
var n = this,
r = arguments,
e = function() {
var e, t;
if (!(i < u)) {
if ((e = a.apply(n, r)) === o.promise()) throw new TypeError("Thenable self-resolution");
t = e && ("object" == typeof e || "function" == typeof e) && e.then, m(t) ? s ? t.call(e, l(u, o, R, s), l(u, o, M, s)) : (u++, t.call(e, l(u, o, R, s), l(u, o, M, s), l(u, o, R, o.notifyWith))) : (a !== R && (n = void 0, r = [e]), (s || o.resolveWith)(n, r))
}
},
t = s ? e : function() {
try {
e()
} catch (e) {
S.Deferred.exceptionHook && S.Deferred.exceptionHook(e, t.stackTrace), u <= i + 1 && (a !== M && (n = void 0, r = [e]), o.rejectWith(n, r))
}
};
i ? t() : (S.Deferred.getStackHook && (t.stackTrace = S.Deferred.getStackHook()), C.setTimeout(t))
}
}
return S.Deferred(function(e) {
o[0][3].add(l(0, e, m(r) ? r : R, e.notifyWith)), o[1][3].add(l(0, e, m(t) ? t : R)), o[2][3].add(l(0, e, m(n) ? n : M))
}).promise()
},
promise: function(e) {
return null != e ? S.extend(e, a) : a
}
},
s = {};
return S.each(o, function(e, t) {
var n = t[2],
r = t[5];
a[t[1]] = n.add, r && n.add(function() {
i = r
}, o[3 - e][2].disable, o[3 - e][3].disable, o[0][2].lock, o[0][3].lock), n.add(t[3].fire), s[t[0]] = function() {
return s[t[0] + "With"](this === s ? void 0 : this, arguments), this
}, s[t[0] + "With"] = n.fireWith
}), a.promise(s), e && e.call(s, s), s
},
when: function(e) {
var n = arguments.length,
t = n,
r = Array(t),
i = s.call(arguments),
o = S.Deferred(),
a = function(t) {
return function(e) {
r[t] = this, i[t] = 1 < arguments.length ? s.call(arguments) : e, --n || o.resolveWith(r, i)
}
};
if (n <= 1 && (I(e, o.done(a(t)).resolve, o.reject, !n), "pending" === o.state() || m(i[t] && i[t].then))) return o.then();
while (t--) I(i[t], a(t), o.reject);
return o.promise()
}
});
var W = /^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;
S.Deferred.exceptionHook = function(e, t) {
C.console && C.console.warn && e && W.test(e.name) && C.console.warn("jQuery.Deferred exception: " + e.message, e.stack, t)
}, S.readyException = function(e) {
C.setTimeout(function() {
throw e
})
};
var F = S.Deferred();

DreamWeavers sees lots of errors, while script does work with jQuery3

Dreamweaver colors many lines red with warning. The script works perfectly with jQuery 3! So are these DreamWeaver warnings to be neglected or should (some of these) be changed, and if so how? I have manually written them down since the can only be seen when hovering the mouse over the line numbers.
Missing semicolon (line 2)
Use strict statement (line 4)
Expected === but saw == (line 10)
Expected !==but saw != (line 23)
Expected and assignment or call but saw expression (line 33)
Missing semicolon (41)
Expected === but saw == (43)
Missing use strict statement (45)
the body of a for in statement should be wrapped in an if statement to filter unwanted properties from the prototype (46)
Expected { but saw e (52)
Expected === but saw == (53)
Expecte { but saw for (54)
Expected { but saw e (55)
Expected === but saw == (60)
Expected and assignment or call but saw expression (70)
Expected and assignment or call but saw expression (75)
Missing semicolon (77)
Expected === but saw == (84)
Expected and assignment or call but saw expression (92)
Expected { but saw for (101)
Expected and assignment or call but saw expression (103)
! function(t, e) {
"function" == typeof define && define.amd ? define("ev-emitter/ev-emitter", e) : "object" == typeof module && module.exports ? module.exports = e() : t.EvEmitter = e()
}(this, function() {
function t() {}
var e = t.prototype;
return e.on = function(t, e) {
if (t && e) {
var i = this._events = this._events || {},
n = i[t] = i[t] || [];
return -1 == n.indexOf(e) && n.push(e), this
}
}, e.once = function(t, e) {
if (t && e) {
this.on(t, e);
var i = this._onceEvents = this._onceEvents || {},
n = i[t] = i[t] || [];
return n[e] = !0, this;
}
}, e.off = function(t, e) {
var i = this._events && this._events[t];
if (i && i.length) {
var n = i.indexOf(e);
return -1 != n && i.splice(n, 1), this
}
}, e.emitEvent = function(t, e) {
var i = this._events && this._events[t];
if (i && i.length) {
var n = 0,
o = i[n];
e = e || [];
for (var r = this._onceEvents && this._onceEvents[t]; o;) {
var s = r && r[o];
s && (this.off(t, o), delete r[o]), o.apply(this, e), n += s ? 0 : 1, o = i[n]
}
return this;
}
}, t;
}),
function(t, e) {
"use strict";
"function" == typeof define && define.amd ? define(["ev-emitter/ev-emitter"], function(i) {
return e(t, i);
}) : "object" == typeof module && module.exports ? module.exports = e(t, require("ev-emitter")) : t.imagesLoaded = e(t, t.EvEmitter)
}(window, function(t, e) {
function i(t, e) {
for (var i in e) t[i] = e[i];
return t;
}
function n(t) {
var e = [];
if (Array.isArray(t)) e = t;
else if ("number" == typeof t.length)
for (var i = 0; i < t.length; i++) e.push(t[i]);
else e.push(t);
return e;
}
function o(t, e, r) {
return this instanceof o ? ("string" == typeof t && (t = document.querySelectorAll(t)), this.elements = n(t), this.options = i({}, this.options), "function" == typeof e ? r = e : i(this.options, e), r && this.on("always", r), this.getImages(), h && (this.jqDeferred = new h.Deferred), void setTimeout(function() {
this.check();
}.bind(this))) : new o(t, e, r);
}
function r(t) {
this.img = t;
}
function s(t, e) {
this.url = t, this.element = e, this.img = new Image();
}
var h = t.jQuery,
a = t.console;
o.prototype = Object.create(e.prototype), o.prototype.options = {}, o.prototype.getImages = function() {
this.images = [], this.elements.forEach(this.addElementImages, this)
}, o.prototype.addElementImages = function(t) {
"IMG" == t.nodeName && this.addImage(t); this.options.background === !0 && this.addElementBackgroundImages(t);
var e = t.nodeType;
if (e && d[e]) {
for (var i = t.querySelectorAll("img"), n = 0; n < i.length; n++) {
var o = i[n];
this.addImage(o);
}
if ("string" == typeof this.options.background) {
var r = t.querySelectorAll(this.options.background);
for (n = 0; n < r.length; n++) {
var s = r[n];
this.addElementBackgroundImages(s);
}
}
}
};
var d = {
1: !0,
9: !0,
11: !0
};
return o.prototype.addElementBackgroundImages = function(t) {
var e = getComputedStyle(t);
if (e)
for (var i = /url\((['"])?(.*?)\1\)/gi, n = i.exec(e.backgroundImage); null !== n;) {
var o = n && n[2];
o && this.addBackground(o, t), n = i.exec(e.backgroundImage)
}
}, o.prototype.addImage = function(t) {
var e = new r(t);
this.images.push(e)
}, o.prototype.addBackground = function(t, e) {
var i = new s(t, e);
this.images.push(i)
}, o.prototype.check = function() {
function t(t, i, n) {
setTimeout(function() {
e.progress(t, i, n)
})
}
var e = this;
return this.progressedCount = 0, this.hasAnyBroken = !1, this.images.length ? void this.images.forEach(function(e) {
e.once("progress", t), e.check()
}) : void this.complete()
}, o.prototype.progress = function(t, e, i) {
this.progressedCount++, this.hasAnyBroken = this.hasAnyBroken || !t.isLoaded, this.emitEvent("progress", [this, t, e]), this.jqDeferred && this.jqDeferred.notify && this.jqDeferred.notify(this, t), this.progressedCount == this.images.length && this.complete(), this.options.debug && a && a.log("progress: " + i, t, e)
}, o.prototype.complete = function() {
var t = this.hasAnyBroken ? "fail" : "done";
if (this.isComplete = !0, this.emitEvent(t, [this]), this.emitEvent("always", [this]), this.jqDeferred) {
var e = this.hasAnyBroken ? "reject" : "resolve";
this.jqDeferred[e](this)
}
}, r.prototype = Object.create(e.prototype), r.prototype.check = function() {
var t = this.getIsImageComplete();
return t ? void this.confirm(0 !== this.img.naturalWidth, "naturalWidth") : (this.proxyImage = new Image, this.proxyImage.addEventListener("load", this), this.proxyImage.addEventListener("error", this), this.img.addEventListener("load", this), this.img.addEventListener("error", this), void(this.proxyImage.src = this.img.src))
}, r.prototype.getIsImageComplete = function() {
return this.img.complete && void 0 !== this.img.naturalWidth
}, r.prototype.confirm = function(t, e) {
this.isLoaded = t, this.emitEvent("progress", [this, this.img, e])
}, r.prototype.handleEvent = function(t) {
var e = "on" + t.type;
this[e] && this[e](t)
}, r.prototype.onload = function() {
this.confirm(!0, "onload"), this.unbindEvents()
}, r.prototype.onerror = function() {
this.confirm(!1, "onerror"), this.unbindEvents()
}, r.prototype.unbindEvents = function() {
this.proxyImage.removeEventListener("load", this), this.proxyImage.removeEventListener("error", this), this.img.removeEventListener("load", this), this.img.removeEventListener("error", this)
}, s.prototype = Object.create(r.prototype), s.prototype.check = function() {
this.img.addEventListener("load", this), this.img.addEventListener("error", this), this.img.src = this.url;
var t = this.getIsImageComplete();
t && (this.confirm(0 !== this.img.naturalWidth, "naturalWidth"), this.unbindEvents())
}, s.prototype.unbindEvents = function() {
this.img.removeEventListener("load", this), this.img.removeEventListener("error", this)
}, s.prototype.confirm = function(t, e) {
this.isLoaded = t, this.emitEvent("progress", [this, this.element, e])
}, o.makeJQueryPlugin = function(e) {
e = e || t.jQuery, e && (h = e, h.fn.imagesLoaded = function(t, e) {
var i = new o(this, t, e);
return i.jqDeferred.promise(h(this))
})
}, o.makeJQueryPlugin(), o
});
Stylistic warnings in minified third party libraries can safely be ignored.
Minifiers will almost always trim semicolons when they can, while linters will always warn about semicolons missing.

Exception adding JS function to Angular 2 TS

Our web app is an Angular 2 app developed using TypeScript. The web app will live inside an Android web view as well as inside a web browser. The web app calls a JavaScript function when it is living inside a web view. The following code (from frmcall.android.js) registers that function in Angular 2:
System.register([], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var callAndorid;
return {
setters:[],
execute: function() {
callAndorid = (function () {
function callAndorid() {
}
callAndorid.prototype.passParam = function (fldMerchCode, fldMerchRefNbr, fldTxnAmt, fldTxnScAmt, fldDatTimeTxn, fldDate1, fldDate2) {
passParameters(fldMerchCode, fldMerchRefNbr, fldTxnAmt, fldTxnScAmt, fldDatTimeTxn, fldDate1, fldDate2);
};
return callAndorid;
}());
exports_1("callAndorid", callAndorid);
}
}
});
This is working perfectly in some environments but fails miserably in others. When failure occurs we get this kind of message:
Is there anyway to avoid this problem?
Edit: I would like to add code that loads frmcall.android.js
System.register(['angular2/core', 'angular2/router', '../framework/rp-http.service', '../framework/rp-intercom.service', '../framework/rp-bean', '../framework/rp-input.component', '../framework/rp-references', '../util/rp-client.util', 'angular2/http', '../samples/frmcall.android'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1, router_1, rp_http_service_1, rp_intercom_service_1, rp_bean_1, rp_input_component_1, rp_references_1, rp_client_util_1, http_1, frmcall_android_1;

Angular2 rc1, where is shims_for_IE

There used to be shims_for_IE in Angular2 package, but since rc1 it's removed. So what's the workaround to support IE9+ ?
Error in IE 11 with rendering mode set to Edge:
Error: SyntaxError: Syntax error
at ZoneDelegate.prototype.invoke (http://localhost:11111/node_modules/zone.js/dist/zone.js:321:14)
at Zone.prototype.run (http://localhost:11111/node_modules/zone.js/dist/zone.js:216:18)
at Anonymous function (http://localhost:11111/node_modules/zone.js/dist/zone.js:571:18)
Evaluating http://localhost:11111/Scripts/script.js
Error loading http://localhost:11111/Scripts/script.js
Error in IE 11 with rendering mode set to IE 9:
File: script
Error: Expected ';'
Evaluating http://localhost:11111/Scripts/script.js
Error loading http://localhost:51592/Scripts/script.js
{
[functions]: ,
description: "Expected ';'
Evaluating http://localhost:11111/Scripts/script.js
Error loading http://localhost:11111/Scripts/script.js",
message: "Expected ';'
Evaluating http://localhost:11111/Scripts/script.js
Error loading http://localhost:11111/Scripts/script.js",
name: "Error",
originalErr: { },
stack: null
}
The script.js generated from script.ts as es6:
/// <amd-module name="script" />
System.register("script", ['#angular/core', '#angular/platform-browser-dynamic'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1, platform_browser_dynamic_1;
var script;
return {
setters:[
function (core_1_1) {
core_1 = core_1_1;
},
function (platform_browser_dynamic_1_1) {
platform_browser_dynamic_1 = platform_browser_dynamic_1_1;
}],
execute: function() {
let script = class script {
constructor(element) {
this.loginUrl = '';
this.antiForgeryName = '';
this.antiForgeryValue = '';
this.loginError = '';
this.submitted = false;
this.loginUrl = element.nativeElement.getAttribute('loginurl');
this.antiForgeryName = element.nativeElement.getAttribute('antiforgeryname');
this.antiForgeryValue = element.nativeElement.getAttribute('antiforgeryvalue');
this.loginError = element.nativeElement.getAttribute('loginError') == null ? "" : element.nativeElement.getAttribute('loginError');
}
};
script = __decorate([
core_1.Component({
selector: 'script',
templateUrl: '/Home/ScriptTemplate.html'
}),
__metadata('design:paramtypes', [core_1.ElementRef])
], script);
exports_1("script", script);
platform_browser_dynamic_1.bootstrap(script);
}
}
});
//# sourceMappingURL=script.js.map
Update
So changing to follwing solves the issue which means shims are needed:
...
var script = function script() {
function() constructor(element) {
this.loginUrl = '';
this.antiForgeryName = '';
this.antiForgeryValue = '';
this.loginError = '';
this.submitted = false;
this.loginUrl = element.nativeElement.getAttribute('loginurl');
this.antiForgeryName = element.nativeElement.getAttribute('antiforgeryname');
this.antiForgeryValue = element.nativeElement.getAttribute('antiforgeryvalue');
this.loginError = element.nativeElement.getAttribute('loginError') == null ? "" : element.nativeElement.getAttribute('loginError');
}
};
...
But this looks like es3 transpile, which thanks to typescript is super impossible as i have tried every single .d.ts out there and it still complains promise not found, set not found, etc...
see: https://github.com/angular/angular/issues/7280
Easy fix. Download the Typings folder from beta.15 and place it under your project, then use browser.d.ts or simply downgrade to beta.15. Although I've seen solutions by installing typings package, it didn't work for me in Visual Studio.

Javascript accessing the variable inside function

I came across website that contains below code.I need to get the value of a.In firefox webconsole i tried this ...javascript:alert(_.Qj.a()); , but it did not work..how can i access the value of a , c f etc
_.Qj = function () {
function a() {
var a = window.__OVERRIDE_SID;
a == _.s && (a = _.Yj.get("SID"));
return !!a
}
return {
Nq: function (a) {
var f = {
SAPISIDHASH: _.r,
APISIDHASH: _.r
};
return a && (a.OriginToken || a.Authorization && f[String(a.Authorization).split(" ")[0]]) ? _.r : _.u
},
er: a,
bq: function () {
var c = _.s;
a() && (c = window.__PVT, c == _.s && (c = _.Yj.get("BEAT")));
return c
},
Qe: function () {
var c = _.Rb.Pq(String(window.location.href));
if (a()) {
var f = 0 == c.indexOf("https:") || 0 == c.indexOf("chrome-extension:"),
g = f ? "SAPISID" : "APISID",
h = f ? window.__SAPISID : window.__APISID;
h == _.s && (h = _.Yj.get(g));
if (h) return f = f ? "SAPISIDHASH" : "APISIDHASH", g = (0, _.Tb)(), g.reset(), g.update([h, c].join(" ")), f + " " + g.Of().toLowerCase()
}
return _.s
}
}
}();
and any basic explanation to this code will be appreciated
Here's how you'd access a:
javascript:alert(_.Qj.er());
Fiddle inspired by your code.

Categories