msal-angularv2.0.4 IE11 not working with promise polyfill - azure-active-directory

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.

Related

Expose Loader does not export module globally

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>

Use AngularJS (Angular1) module from Angular2 project

Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!

issue with running Angle - Bootstrap Admin app (angular-meteor version): TypeError: $browser.addPollFn is not a function angular-cookies.js:60

just purchased Angle - Bootstrap Admin app from wrapbootstrap
Tried to run the angular-meteor version of the app
The first issue was that meteor did not like the contents of the default index.html, so I renamed the file to be index.ng.html
Now the error I'm getting in the browser console is:
TypeError: $browser.addPollFn is not a function angular-cookies.js:60
What can be done to fix this?
Not sure about wrapbootstrap, but generally this error means you are using incompatible versions of angular and angular-cookies.
The external angular modules you use (e.g. ngAnimate, ngCookies, ngResource, ngRoute etc), should always be the same version as angular.
This issue can be Resolved by using same Version of angular.min.js and angular-cookies.js.
It always good to use same version of files

angular animate function expected error in ie9

I am using angular-animate.js in angularjs ui grid plugin. But in ie9 I am getting error "Function expected" in function fireDoneCallbackAsync(). Please see the attached screenshot. How can I handle this error and also I am not clear from which part of the code this error is being thrown.
Although most modern browsers have good support for CSS transitions and CSS animations, IE9 and earlier do not.
If you want animations that are backwards-compatible with older browsers, consider using JavaScript-based animations.
Described here in detail.
The problem was due to having different version of angular js and animate js. My animate js was 1.2.26, recently I update angular js to 1.3.15, that resulted this error. After updating animate js also to 1.3.15 has solved the problem.

Angular JS ui-router on Internet Explorer 8

Has anyone gotten the Angular JS ui-router quick-start to run in IE8? The quick start's here:
ui-router quick-start
It's working in chrome but not in IE8.
Thanks!
[Edit]
I have read the ie documentation under angular js but the fix provided doesn't seem to fix the issue (missing forEach method). The fix only addresses issues with angular js and not angular-ui-router.
The only thing that works is from an answer here: AngularJS - IE8 html template. The basically provides an implementation for forEach which is not supported in IE.
Can you try building off of master? There was a pull request merged just after the last release (https://github.com/angular-ui/ui-router/pull/392) that resolved some IE8 issues. Everything else should work fine AFAIK.

Resources