We have reactjs components using some external(coffee script widgets) exported globally using expose-loader. It works fine on chrome, but facing issue on IE11 Globally exposed modules are not accessible. Gives below error SCRIPT5009: 'dashboard' is undefined.
exposed module as below
require("expose-loader?widgets!../widgets");
When we try to access window.widgets or widgets it gives undefined on IE11, but works fine on Chrome
Double-check how your script files are being inserted. I was running into a similar issue with jQuery on a webpack-powered legacy Wordpress site. I just discovered that adding type="module" into my script tags was breaking the expose-loader on IE11. As soon as I removed that attribute from my script tags, everything started firing fine again in IE11.
For example, this will break IE11:
<script defer src="myModule.js" type="module" crossorigin>
While this won't:
<script defer src="myModule.js" crossorigin>
Related
I believe we have everything mentioned in https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/ie-support.md
We have included a promise polyfill at the top of our index.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
However when attempting to run the angular app in IE11 we get: Script 1002: syntax error
We are building the app with ES5, including adding IE11 to browserlist.rc and I have also tried including all core-js polyfills.
Perhaps I am adding the promise polyfill in the wrong place for angular? However I also tried an angular promise polyfill package, which did not work.
Not sure why IE11 is not loading at all, i believe it may be a difference with msal js and msal angular?
For anyone having similar issues:
We were using MSAL-angular v2.0.4 with Angular 6. Having downgraded to MSAL-angular v1.4.0, IE11 works fine.
I am trying to implement a 'remember me' option on my login page and have ventured down the path of using ngCookies to store a local cookie to handle this. However, in trying to follow the instructions from angular documentation I am unable to get the module working in my Web Application.
I am using AngularJS version 1.4.8 and have made sure my angular-cookies.min.js is running the exact same version. I have made sure to add my <link> tags in the correct order:
<script src="../vendor/jquery/dist/jquery.min.js"></script>
<script src="../vendor/angularjs/angular.min.js"></script>
<script src="../vendor/angularjs/angular-cookies.min.js"></script>
However, when I try to load the module into my application:
var EdgeApp = angular.module('EdgeApp', [
'ngCookies',
'ngAnimate',
....
])
I get an $injector:modulerr error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=EdgeApp&p1=Error%3A…2Fdrake-monitor%2FRestApi%2Fvendor%2Fangularjs%2Fangular.min.js%3A19%3A463)
All other modules and dependencies load correctly and work fine.
Based on the advice from #WonderGrub, I stripped my project back to the bear basics and worked from the ground up.
To start with, I installed all of my external modules correctly using Bower (something I wasn't doing before), then I added one module at a time to see if I had any conflicts.
I also reverted back to using .js files instead of .min.js files for my development to help me identify errors more accurately.
I'm unsure what the actual cause of my issue was, but going through the procedures above and the advice from my initial post has worked for me without errors.
I have created an MFP project with the MFP CLI
After creating the project, I ran "yo mobileangularui" in the project root to install Mobile Angular UI
This scaffolds out a Mobile Angular UI project with AngularJS and Gulp
I am minifying all the js and css files, including the MFP javascript files and putting them in the MFP common folder with gulp
Everything loads fine when I view it in the MFP console, but not on localhost.
My problem is that the sidebars do not work when I click on them. I am not getting any errors. I log a message console.log when I click the menu button and it comes through fine, but it doesn't open the side bar.
If I build this project with out MFP everything works fine.
Not sure whats going on as everything with MFP seems to load fine in the console.
Some images:
https://drive.google.com/file/d/0B48-zmJJTxrYamgtcEtiNi1OMmc/view?usp=sharing
https://drive.google.com/file/d/0B48-zmJJTxrYeG1NUHNpbHA0ZUE/view?usp=sharing
I have never used AngularJS Mobile UI tooling, but the WL is undefined error (that is discussed in the comments) is occurring because of the way you are injecting source to the index.html.
This is how the resulting (part of the) HTML should look:
...
...
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
<script src="worklight/checksum.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="js/app.min.js"></script>
But this is how it's actually looking:
...
...
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
<script src="worklight/checksum.js"></script>
<script src="cordova.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="js/app.min.js"></script>
As you can see there are two Cordova references, one correct (worklight/cordova.js) and one incorrect (cordova.js)
The extra cordova.js is apparently coming from gulpfile.js at line #148 where it inject.push (path-to-cordova.js). This injection should be removed or handled differently because MFP already uses Cordova and injects it. Use MFP's.
You can also fix the header. It seems to happen because of the following in app.min.css:
.app-body, .app-content {
height: 100%;
overflow: hidden;
display: block;
padding: 0;
}
Change padding: 0 to padding-top: 25px;. But that may be iOS-specific... meaning you will not see it when previewing the app in the MFP console, because there is no status bar there unlike in the iOS Simulator/device.
The problem with angular mobile ui was my manual bootstraping of angular for MFP
i was using
angular.element(document).ready(function(){
angular.bootstrap(document, ['yoMAUI']);
location.hash = '/';
});
When I need to bind to that body and not the document like so
var body = document.getElementsByClassName("body") ;
angular.element(document).ready(function(){
angular.bootstrap(body, ['yoMAUI']);
location.hash = '/';
});
Is this going to mess with MFP at all, it all? seems to be running fine in the console
I created an empty web solution, added an empty web application, used following NuGet command to download HotTowel.Angular template,
Install-Package HotTowel.Angular -pre
Executed the project and as soon as I run my web application it shows splash screen then, I get following error:-
{{VM.BUSYMESSAGE}}
Any idea why is that ?
I get the same error after updating to jQuery 2.1.3. I do not get this error with the default template issued version of 2.1.1.
UPDATE: It turns out I forgot to change the version in the script reference to jQuery on the index.html page to match the library. So check that out on your end and you should have your solution.
I have same problem. I tried both installing it via nuget package and package manager console. No Luck. Showing {{ VM.BUSYMESSAGE }} on screen. Error is showing $ is undefined. Looks like it is problem related to jQuery.
Unhandled exception at line 7, column 38 in scripts/bootstrap.js
0x800a139e - JavaScript runtime error: Bootstrap's JavaScript requires jQuery
index.html page contain:
<script src="scripts/jquery-2.1.1.js"></script>
Check your jQuery version and update to
<script src="scripts/jquery-2.1.N.js"></script>
//In my case
<script src="scripts/jquery-2.1.4.js"></script>
Hello I am using UI Bootstrap for displaying datepicker in my app.
this is my reference order:
<!--ANGULAR CORE-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<!--APPLICATION INIT-->
<script src="app/js/app.js"></script>
<!--JQUERY-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--BOOTSRAP UI-->
<script src="app/js/libs/ui-bootstrap-tpls-0.11.0.min.js"></script>
I use the tpls version because it supposes to include the templates.
I inject the dependency like that:
angular.module('globapp', ['ngRoute', 'ui.bootstrap'])
when I try to popup the datepicker it doesn't show. In the chrome developer I can see that the code searches for template folder, and I recieve 404 error (datepicker.html, popup.html).
I searched about that in the internet, and everyone tells the same thing: if I use the tpls version, it should provide me the default templates.
thanks
Your app.js has your app init -so that's where your creating your angular module and are hoping to inject bootstrap-ui as a dependency but that script hasn't been loaded yet as it's last in the list.
This would be the first thing to check. Load your scripts in order of least dependent first so jquery first then your core angular, then your plugin libraries and then your app scripts.