Angular2 rc1, where is shims_for_IE - javascript

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.

Related

Import javascript Module in Angular 13

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

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;

Error in Javascript: Unexpected token (

My page is throwing a javascript error, but I can't figure out why. I'm trying to debug a script that was imported to my client's site. It's throwing the error here:
function(t){
e._trigger("receive",t,this._uiHash(this))
}
The error is "Uncaught SyntaxError: Unexpected token ("
For context, here is the chunk of code it is located in. Unfortunately I don't really know what purpose these functions serve, but the error is preventing the page from loading correctly. Hopefully this Javascript is enough to give the context, the full script is very long.
_clear: function(e, t) {
this.reverting = !1;
var i, n = [];
if (!this._noFinalSort && this.currentItem.parent().length && this.placeholder
.before(this.currentItem), this._noFinalSort = null, this.helper[0] ===
this.currentItem[0]) {
for (i in this._storedCSS)
("auto" === this._storedCSS[i] || "static" === this._storedCSS[
i]) && (this._storedCSS[i] = "");
this.currentItem.css(this._storedCSS).removeClass(
"ui-sortable-helper")
} else this.currentItem.show();
for (this.fromOutside && !t && n.push(function(e) {
this._trigger("receive", e, this._uiHash(this.fromOutside))
}), !this.fromOutside && this.domPosition.prev === this.currentItem
.prev().not(".ui-sortable-helper")[0] && this.domPosition.parent ===
this.currentItem.parent()[0] || t || n.push(function(e) {
this._trigger("update", e, this._uiHash())
}), this !== this.currentContainer && (t || (n.push(function(e) {
this._trigger("remove", e, this._uiHash())
}), n.push(function(e) {
return
function(t) {
e._trigger("receive", t, this._uiHash(this))
}
}.call(this, this.currentContainer)), n.push(function(e) {
return
function(t) {
e._trigger("update", t, this._uiHash(this))
}
}.call(this, this.currentContainer)))), i = this.containers.length -
1; i >= 0; i--) t || n.push(function(e) {
return function(t) {
e._trigger("deactivate", t, this._uiHash(this))
}
}.call(this, this.containers[i])), this.containers[i].containerCache
.over && (n.push(function(e) {
return
function(t) {
e._trigger("out", t, this._uiHash(this))
}
}.call(this, this.containers[i])), this.containers[i].containerCache
.over = 0);
if (this.storedCursor && (this.document.find("body").css("cursor", this
.storedCursor), this.storedStylesheet.remove()), this._storedOpacity &&
this.helper.css("opacity", this._storedOpacity), this._storedZIndex &&
this.helper.css("zIndex", "auto" === this._storedZIndex ? "" : this
._storedZIndex), this.dragging = !1, this.cancelHelperRemoval) {
if (!t) {
for (this._trigger("beforeStop", e, this._uiHash()), i = 0; n.length >
i; i++) n[i].call(this, e);
this._trigger("stop", e, this._uiHash())
}
return this.fromOutside = !1, !1
}
if (t || this._trigger("beforeStop", e, this._uiHash()), this.placeholder[
0].parentNode.removeChild(this.placeholder[0]), this.helper[0] !==
this.currentItem[0] && this.helper.remove(), this.helper = null, !t
) {
for (i = 0; n.length > i; i++) n[i].call(this, e);
this._trigger("stop", e, this._uiHash())
}
return this.fromOutside = !1, !0
}
If you want to look at the page, it's located here
Every section of your code that looks like:
return
function(t) {
e._trigger("out", t, this._uiHash(this))
}
is broken. The rules of JavaScript automatic semicolon insertion are such that those return statements are treated as complete when the parser hits the newline. It has to look like:
return function(t) {
e._trigger("out", t, this._uiHash(this))
}
That may seem astonishing, but it's true. The error you're getting happens because the parser thinks that that function keyword is opening a new function declaration statement, and in such a statement the function name is not optional.

AngularJS minError Uncaught Object

I have a new AngularJS project I've just set up. I've installed angular and angular-resource via bower and all's good. I've installed another service I've used before - https://github.com/Fundoo-Solutions/angularjs-modal-service but when I inject the module it causes the error below:
Uncaught object
It's pointing to the return statement of this function in AngularJS:
function minErr(module) {
return function () {
var code = arguments[0],
prefix = '[' + (module ? module + ':' : '') + code + '] ',
template = arguments[1],
templateArgs = arguments,
stringify = function (obj) {
if (typeof obj === 'function') {
return obj.toString().replace(/ \{[\s\S]*$/, '');
} else if (typeof obj === 'undefined') {
return 'undefined';
} else if (typeof obj !== 'string') {
return JSON.stringify(obj);
}
return obj;
},
message, i;
message = prefix + template.replace(/\{\d+\}/g, function (match) {
var index = +match.slice(1, -1), arg;
if (index + 2 < templateArgs.length) {
arg = templateArgs[index + 2];
if (typeof arg === 'function') {
return arg.toString().replace(/ ?\{[\s\S]*$/, '');
} else if (typeof arg === 'undefined') {
return 'undefined';
} else if (typeof arg !== 'string') {
return toJson(arg);
}
return arg;
}
return match;
});
message = message + '\nhttp://errors.angularjs.org/1.2.18/' +
(module ? module + '/' : '') + code;
for (i = 2; i < arguments.length; i++) {
message = message + (i == 2 ? '?' : '&') + 'p' + (i-2) + '=' +
encodeURIComponent(stringify(arguments[i]));
}
return new Error(message);
};
}
I think it's saying that Error doesn't exist?
Am I missing a module or something?
One of the reason why a person get this error with Angular. The module that you have included is not injected properly. For example, you must inject it as a Dependency injection properly before using that. So, please make sure that it's done.
And another reason is properly define ng-app="<app-name>" and make sure that the file in which you have written your Angular application code, for example: angular.module('<app-name>', []) is included as the script file.

ember-data.js failure on script init

I'm using all of the latest dependencies for emberjs and yet I end up with an error on initializing the scripts in the page at ember-data-latest.min.js with:
Uncaught TypeError: Object function () {...} has no method 'registerInjection'
Before even writing a single line for my app. Why is that?
Appreciate any kind help.
Here's my script list:
jquery-1.10.2.min.js
handlebars-v1.3.0.js
ember-1.5.1.js
ember-states.js
ember-data-latest.min.js
And here's the full error:
Uncaught TypeError: Object function () {
if (!wasApplied) {
Class.proto(); // prepare prototype...
}
o_defineProperty(this, GUID_KEY, nullDescriptor);
o_defineProperty(this, '__nextSuper', undefinedDescriptor);
var m = meta(this), proto = m.proto;
m.proto = this;
if (initMixins) {
// capture locally so we can clear the closed over variable
var mixins = initMixins;
initMixins = null;
this.reopen.apply(this, mixins);
}
if (initProperties) {
// capture locally so we can clear the closed over variable
var props = initProperties;
initProperties = null;
var concatenatedProperties = this.concatenatedProperties;
for (var i = 0, l = props.length; i < l; i++) {
var properties = props[i];
Ember.assert("Ember.Object.create no longer supports mixing in other definitions, use createWithMixins instead.", !(properties instanceof Ember.Mixin));
if (typeof properties !== 'object' && properties !== undefined) {
throw new Ember.Error("Ember.Object.create only accepts objects.");
}
if (!properties) { continue; }
var keyNames = Ember.keys(properties);
for (var j = 0, ll = keyNames.length; j < ll; j++) {
var keyName = keyNames[j];
if (!properties.hasOwnProperty(keyName)) { continue; }
var value = properties[keyName],
IS_BINDING = Ember.IS_BINDING;
if (IS_BINDING.test(keyName)) {
var bindings = m.bindings;
if (!bindings) {
bindings = m.bindings = {};
} else if (!m.hasOwnProperty('bindings')) {
bindings = m.bindings = o_create(m.bindings);
}
bindings[keyName] = value;
}
var desc = m.descs[keyName];
Ember.assert("Ember.Object.create no longer supports defining computed properties. Define computed properties using extend() or reopen() before calling create().", !(value instanceof Ember.ComputedProperty));
Ember.assert("Ember.Object.create no longer supports defining methods that call _super.", !(typeof value === 'function' && value.toString().indexOf('._super') !== -1));
Ember.assert("`actions` must be provided at extend time, not at create " +
"time, when Ember.ActionHandler is used (i.e. views, " +
"controllers & routes).", !((keyName === 'actions') && Ember.ActionHandler.detect(this)));
if (concatenatedProperties && indexOf(concatenatedProperties, keyName) >= 0) {
var baseValue = this[keyName];
if (baseValue) {
if ('function' === typeof baseValue.concat) {
value = baseValue.concat(value);
} else {
value = Ember.makeArray(baseValue).concat(value);
}
} else {
value = Ember.makeArray(value);
}
}
if (desc) {
desc.set(this, keyName, value);
} else {
if (typeof this.setUnknownProperty === 'function' && !(keyName in this)) {
this.setUnknownProperty(keyName, value);
} else if (MANDATORY_SETTER) {
Ember.defineProperty(this, keyName, null, value); // setup mandatory setter
} else {
this[keyName] = value;
}
}
}
}
}
finishPartial(this, m);
this.init.apply(this, arguments);
m.proto = proto;
finishChains(this);
sendEvent(this, "init");
} has no method 'registerInjection'
You need to make sure to use the latest version which gets published at Ember build site.
The latest build for Ember Data is found here.

Categories