Esri bootstrap-map-js and Invalid argument error on IE 7/8 - internet-explorer-7

I'm using this awesome project called bootstrap-map-js.
A simple framework for building responsive mapping apps with ArcGIS
and Bootstrap.
Since Esri ArcGIS JavaScript API states that they support IE7+ I thought the amazing bootstrap-map-js project would also be compatible with IE 7. Maybe it is and the problem is in my code...
I'm getting an Invalid Argument error with no further info on IE 11 Developer Tools console window when simulating the page on IE 7/8 document modes. IE 9 onwards works great. All other browsers work great too! :) Only finicky IE refuses to work as always...
Looks like dojo.require is barking somewhere. See this related question: Dojo nested requires on IE7 and IE8 causes Invalid Argument Exception
If I remove the reference to bootstrapmap.js and the var map = ... declaration, then the code works and I see hey Leniel! otherwise the code breaks and I see the Invalid argument. The code breaks in the call to BootstrapMap.create.
Can anyone shed some light on what's going on with finicky IE? Is there anything I can do to see more from the error? As you see in the image, there's no message, description, etc. :(
Here's the minimum code I had to assemble to get to what was causing the error:
<!-- ArcGIS JavaScript API v3.8 -->
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.8/3.8/init.js"></script>
<script type="text/javascript">
function init()
{
require([
"esri/map",
"/myproject/Scripts/bootstrapmap.js",
"esri/layers/FeatureLayer"
], function(
Map,
BootstrapMap,
FeatureLayer
)
{
// Get a reference to the ArcGIS Map class
var map = BootstrapMap.create("mapDiv", {
basemap: "oceans",
center: [-117.789, 33.543],
zoom: 12
});
alert('hey Leniel!');
});
}
dojo.addOnLoad(init);
</script>
I made some progress on this issue as you can read here.
I read Configuring Dojo with dojoConfig and then added this before ArcGIS JS API script tag:
<!-- set Dojo configuration, load Dojo -->
<script>
dojoConfig = {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
async: true
};
</script>
Now I get a more descriptive error instead of only Invalid argument as before. IE Dev Tools shows this:
SCRIPT87: Invalid argument.
File: init.js, Line: 136, Column: 65
This is line 136 in init.js when I click on the link provided by IE Dev Tools:
b;b=d[b]?"cssFloat"in f.style?"cssFloat":"styleFloat":b;if(3==k)return q?g(f,e):f.style[b]=e;for(var r in b)l.set(a,r,b[r]);return l.getComputedStyle(f)};return l})},"dojo/dom-geometry":function(){define(["./sniff","./_base/window","./dom","./dom-style"],function(b,n,k,m){function l(a,b,d,c,h,f){f=f||"px";a=a.style;isNaN(b)||(a.left=b+f);isNaN(d)||(a.top=d+f);0<=c&&(a.width=c+f);0<=h&&(a.height=h+f)}function r(a){return"button"==a.tagName.toLowerCase()||"input"==a.tagName.toLowerCase()&&"button"==
Sounds like IE 7/8 is barking about some crazy CSS manipulation done by ArcGIS JS API.

Fixed it connecting the dots...
Searched for NaNpx e's value as I had never seen that before. Found this jQuery ticket.
Followed the advice given there and changed that return in line 136,
from:
return q?g(f,e):f.style[b]=e;
to:
return q?g(f,e):f.style[b]=(e=='NaNpx'?'0px':e);
Note: I'm using jQuery 1.11.0 which supports IE 7.

Related

Error in Jimp.loadFont (use load-bmfont module) with React

I am testing Jimp.js for image manipulation (using React with react-scripts, npm: 6.14.4, node: v12.16.3)
Everything is going well except writing text on a loaded image
import Jimp from 'jimp'
Jimp.read(image)
.then(image => {
console.log('image loaded', image)
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(font => {
console.log('font loaded', font)
image.print(font, 10, 10, 'Hello world that wraps!', 12)
// write image
})
})
This throws an error "error parsing font malformed file -- no element" in browser.js of load-bmfont module line 71 and dont execute the log 'font loaded'.
Googling not help i found only 2,3 items about this, associate with using custom fonts - but i use standard font from Jimp. (Using BMFont files instead of Jimp standard fonts doesnt help)
My first thought was the error ocured in a React App in the browser, so i write a Jest test to see if its work without browser context but it fail just like that.
Got any ideas?
Solved...
I'm using the React App within a Java Web Framework in a JSP File.
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
search the font in a path that doesn`t exist for the webapp.
Moving the font files to a reachable path with context root
Jimp.loadFont(`${CONTEXT_ROOT}/foo/bar/font.font`) works.

angularjs directive not being loaded when angularjs-dragula package is required

I am in the process of migrating our .NET Framework project over to .NET Core. And where we previously relied on the BundleTable tools in .NET Framework. We are now using webpack.
I have a directive that uses a package 'angularjs-dragula'. The webpack entry definition is as follows
'bundles/grouping':
[
"./Scripts/angularjs-dragula.js",
"./App/components/grid.directive.js",
"./App/components/inline-edit.directive.js",
"./App/services/grouping.service.js",
"./App/components/grouping/grouping.directive.js"
],
I initialize the directive as follows:
(function () {
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService) {
...
As it is, the page never loads grouping.directive. And there are no errors. Unless i remove the dragula file in the webpack entrypoint. The directive will then load, but complain:
ReferenceError: angularDragula is not defined[Learn More]
I have tried relying on webpack to import the package, and removed it from the entry definition. I installed angularjs-dragula into my node_modules, and used
var angularDragula = require('angularjs-dragula');
(function () {
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService) {
...
However this results in the same behavior.
The angularjs-dragula package works, since we were using it before the move to webpack. However now it seems to be silently failing, and taking the rest of the directive with it?
How can I begin to diagnose this issue?
The AngularJS wrapper for Dragula is unusual in that it places on global scope a function named angularDragula. That function registers the dragula module with AngularJS when the function is invoked with angular as an argument. It returns a string with the module name "dragula".
angularDragula(angular)
angular.module("app",["dragula"])
.run(function(dragulaService) {
console.log(dragulaService);
})
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angularjs-dragula/dist/angularjs-dragula.js"></script>
<body ng-app="app">
<h1>Hello AngularJS!</h1>
</body>
the page never loads grouping.directive
How can I begin to diagnose this issue?
I would use the Developer Console to insert breakpoints. Then examine variables.
The above example loads AngularJS with Dragula and successfully logs the dragularService.

AngularJS app does not load on iPad / iPhone Safari (works only after page refresh / second load and afterwards)

I have a really weird issue with my AngularJS app on iPad / iPhone safari.
The issue occurs only of first load (after clearing history / website data).
The issue that the application wont start at all - I get a white page and the console (from MacBook develop tools) is full with errors,
Sometimes I'm getting lots of
TypeError: undefined is not an object (evaluating 'd.module')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 'd.$$minErr')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 't.noop')
ReferenceError: Can't find variable: angular
ReferenceError: Can't find variable: angular
...
Sometimes I'm getting Error: $injector:unpr - Unknown Provider
And sometimes Error: $injector:nomod - Unknown Provider
But if I hit page refresh after getting the white page / errors - all works just fine.
This is part of the third party js libs/plugins I include on my index.html
<script src="resources/plugins/head.load.min.js"></script>
<script src="resources/plugins/modernizr-custom.js"></script>
<script src="resources/lib/jquery/jquery-2.1.0.min.js"></script>
<script src="resources/lib/angular/angular.min.js"></script>
<script src="resources/lib/angular/angular-resource.min.js"></script>
<script src="resources/lib/angular/angular-route.min.js"></script>
<script src="resources/lib/angular/angular-animate.min.js"></script>
<script src="resources/lib/angular-translate/angular-translate.min.js"></script>
<script src="resources/lib/angular-translate/angular-translate-loader-static-files.js"></script>
<script src="resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js"></script>
<script src="resources/lib/ng-table/ng-table.min.js"></script>
<script src="resources/lib/file-upload/ng-file-upload-shim.min.js"></script>
<script src="resources/lib/file-upload/ng-file-upload.min.js"></script>
I'm really lost here...
Another thing: I have noticed on my Mac (Resources->Scripts) that if I open a file, lets say Resources->Scripts->FileNameOne.js the content is actually of another file FileNameTwo.js ??? is it a flaw of the dev tools of the Mac that confuses the names/content or can it be related to the problem???
Any Ideas?
Here is the complete solution with Grunt
Content of the Gruntfile.js
'use strict';
module.exports = function(grunt){
grunt.initConfig({
concat: {
dist: {
src: ['WebContent/resources/plugins/head.load.min.js', 'WebContent/resources/plugins/modernizr-custom.js',
'WebContent/resources/lib/jquery/jquery-2.1.0.min.js',
'WebContent/resources/lib/angular/angular.min.js', 'WebContent/resources/lib/angular/angular-resource.min.js', 'WebContent/resources/lib/angular/angular-route.min.js', 'WebContent/resources/lib/angular/angular-animate.min.js',
'WebContent/resources/lib/angular-translate/angular-translate.min.js', 'WebContent/resources/lib/angular-translate/angular-translate-loader-static-files.js',
'WebContent/resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js',
'WebContent/resources/lib/ng-table/ng-table.min.js',
'WebContent/resources/lib/websockify/util.js', 'WebContent/resources/lib/websockify/base64.js', 'WebContent/resources/lib/websockify/websock.js',
'WebContent/resources/lib/file-upload/ng-file-upload.min.js',
'WebContent/resources/js/services/*',
'WebContent/resources/js/services/dialogs/*',
'WebContent/resources/js/controllers/*',
'WebContent/resources/js/directives/*',
'WebContent/resources/plugins/*'],
dest: 'dist/myWebAppInOneFile.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
Then just call grunt from the relevant folder and you'll get your file
What build toolchain are you using. One option would be to concatenate all of the includes into a single file, this should stop the error where the wrong scripts are being loaded - As mentioned by Marcus H
Gulp
https://github.com/contra/gulp-concat
Grunt
https://github.com/gruntjs/grunt-contrib-concat

facebookConnectPlugin is not defined (ngCordova, Ionic app)

I'm trying to add native fb connect to my ionic app.
I'm using:
- Ionic
- ngCordova
- http://ngcordova.com/docs/plugins/facebook/
This is my code:
angular.module('starter.controllers', ['ngCordova'])
.config(function($cordovaFacebookProvider) {
var appID = 123456789;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
})
Which leads to this error >
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
ReferenceError: facebookConnectPlugin is not defined
at browserInit (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:1576:7)
at http://localhost:8100/js/controllers.js:6:30
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11994:17)
at runInvokeQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11900:35)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11909:11
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11907:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
Tried a couple of things but without any positive result:
- When I build it and run it on my device the app displays a blank screen
Tried the normal cordova js code:
Changed $cordovaFacebookProvider to $cordovaFacebook (based on this thread:
forum.ionicframework.com/t/unknown-provider-cordovaprovider/13305/3
And this is a another related thread, but doesn't help me thought..
forum.ionicframework.com/t/does-ng-crodova-has-facebook-login/9163
I already have a prototype working with the fb auth in the in-app-browser. But I really want to have a native fb connect functionality.
i found a way to resolve this issue.
Thanks to this thread : https://github.com/driftyco/ng-cordova/issues/446
and this tutorial : https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/browser/README.md
1st step : Don't forget the <div id="fb-root"></div> after ur body.
2nd step : I added facebookConnectPlugin to my bower dependencies
See my bower.json :
"dependencies": {
"angular-google-maps": "~2.0.13",
"google-map": "~0.4.1",
"facebook-connect-plugin": "https://cdn.rawgit.com/Wizcorp/phonegap-facebook-plugin/master/facebookConnectPlugin.js"
}
See my app.config + code to init:
app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $animateProvider, $httpProvider, $cordovaFacebookProvider) {
var appID = 597135743751760;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
$cordovaFacebookProvider call facebookConnectPlugin()
3th step : After changing this dependencies, don't forget to call bower update from ur CLI.
4th step : Include the new facebookblablabla.js in your index.html.
it can be
<script src='bower_components/facebook-connect-plugin/index.js'></script>
for me it was
<script src='lib/facebook-connect-plugin/index.js'></script>
5th step : add in the Valid OAuth redirect URIs field at your Facebook App :
http://static.ak.facebook.com/connect/xd_arbiter/
Hope it works for you :) !
My answer is not providing a solution for your issue but an advice.
Why using facebook Cordova when you can use HelloJS?
faceBook Cordova is platform dependant, much slower as it runs cordova true node.js and not evolutive.
HelloJS permits to integer various Oauth2 authentication very easily including, facebook / google / twitter / instagram ...
Without to tell that the compilation for facebook cordova is very tricky with the facebook key app. On HelloJS, this is only a parameter that you can easily change.
I don't know if someone still stuck with this thing then please follow the method mentioned my #Alexy and then edit the 'lib/facebook-connect-plugin/index.js' file line from :
if(cordova.platformId === 'browser')
to
if(!window.cordova || (window.cordova && window.cordova.platformId === 'browser'))
Hope this Helps :)

AngularDart on Firefox fails with "receiver.webkitCreateShadowRoot is undefined"

I have an AngularDart application that is working fine on Chromium and Chrome with Javascript. But in Firefox and IE, I get the following error:
[14:36:14.648] "NullError: receiver.webkitCreateShadowRoot is undefined
STACKTRACE:
.Element.createShadowRoot$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:84445
J.createShadowRoot$0$x#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153659
._ComponentFactory.call$6#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:11337
.BlockFactory__instantiateDirectives__closure2.call$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:11097
.Primitives_applyFunction#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:5148
._FactoryProvider.get$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:125034
J.get$2$x#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153716
.DynamicInjector__getInstanceBySymbol_closure.call$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:124806
._defaultCreationStrategy#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:125162
.Binding.creationStrategy$3#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:125271
.DynamicInjector._getInstanceBySymbol$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:124652
.DynamicInjector.get$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:124694
J.get$1$x#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153713
.BlockFactory__instantiateDirectives_closure3.call$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:11183
.IterableMixinWorkaround_forEach#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:22126
.JSArray.forEach$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:1995
J.forEach$1$ax#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153707
.BlockFactory._instantiateDirectives$5#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10887
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10816
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10818
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10818
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10818
.BlockFactory.call$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10776
.ngBootstrap_closure0.call$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:7661
._rootRun#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:27183
._ZoneDelegate.run$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:34652
.NgZone__onRun_closure.call$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10306
.NgZone._onRunBase$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10162
.NgZone._onRun$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10181
$$.BoundClosure$4<.call$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:424
._ZoneDelegate.run$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:34652
._CustomizedZone.run$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:35046
.ngBootstrap#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:7485
.main#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:130170
._IsolateContext.eval$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:3635
.startRootIsolate#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:3301
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:161315
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:161295
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:161309
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:9
"
Here is my foobarUI/pubspec.yaml:
name: foobarUI
description: A sample web application
dependencies:
angular: 0.9.3
browser: any
json_object: any
petitparser: any
unittest: any
foobar:
path: ../foobarLib
I tried to add the js, shadow_dom and web_ui modules but it made no difference.
I tried to add "useShadowDom = true;" (and false) to the main dart file, no difference.
From the error, it seems obvious that the webkit support for DOM shadow root is missing but why is this module not handling this ?
The same error occurs with angular.dart.tutorial chapter_03 sample. This is clearly an issue with Angular.Dart. Bug filed as: https://code.google.com/p/dart/issues/detail?id=15752
The Dart bug for issue is at: https://code.google.com/p/dart/issues/detail?id=15144
It has been fixed in Dart bug has not been pushed to AngularDart yet. That work is blocked by https://github.com/angular/angular.dart/issues/366.

Resources