Angular 1 component router: Cannot read property 'startsWith' of undefined - javascript

I'm using Angular 1 component router and it works weired.
When I run website locally it works fine, but if I access it from another PC I receive js error
Cannot read property 'startsWith' of undefined
I tried to access website from 4-5 PCs and different browsers IE, Chrome and Safari, it either works or displays js error,
Please advice

The issue was in base href url.
I setup location provider to use HTML5 mode and added base href to the page like following:
<base href="/Application/">
When I access the http://company-domain.com/application I see JS error, but when I access the http://company-domain.com/Application it works as expected. That is why it was working not stable for me, I didn't pay much attention to the base url.
So, the issue was not in component router, but how location provider parses the base href.
Stupid issue, but the way that base href is case sensitive and can't be configured to be case insensitive is pain.
Keep an eye on that.

Related

SMART on FHIR client-js: Invalid Character Error on IE11

Note: The issue is also reported on GitHub. Please take a look at Git issue as well for current progress/investigation.
I'm using fhir-client v0.1.15 to develop a SMART on FHIR web application that would run in EHR launch scenario. For example in Epic Hyperspace simulator that uses IE to run the SMART application.
While testing my application locally(localhost) on IE11, I get a JavaScript error from within fhir-client.js.
SCRIPT1014: Invalid character
File: fhir-client.js, Line: 38113, Column: 3
Below are the two lines from code. 38112 & 38113 in order:
var ret = Adapter.get().defer();
var state = JSON.parse(sessionStorage[params.state]);
Any solution or workaround would be much appreciated.
Updated
Upon further investigation we found that sessionStorage is empty when line with JSON.parse executes. However, strange thing is why/how sessionStorage gets empty after redirection from authorization server. This only happens with IE11, everything works fine on Chrome though.
PS. Can someone please add a new tag SMART or SMARTonFHIR?
Though I couldn't find the exact root cause and solution but let me share the findings that helped me resolve this issue somehow.
The issue doesn't exist when I test my SMART application with redirect_uri(in FHIR.oauth2.authorize call) set to a staging server URL instead of localhost.
PS. I’m open to better, and more qualified answers for acceptance.

Exception in defer callback prevents iron-router from rendering when in an iframe on FireFox

I'm working on Meteor app that mostly expects to exist within an <iframe>.
Steps to reproduce
meteor create iframe-test
cd iframe-test
meteor add iron:router
meteor
Create a test page using jsbin.com or some other tool that loads http://localhost:3000 in an iframe.
Load the page in Firefox and take a look at the console. You'll see something like this (note you might need to hard-refresh with Ctrl/Cmd+Shift+R).
I've added links to an example jsbin and git repo below.
18:26:56.356 Exception in defer callback: onLocationChange#http://localhost:3000/packages/iron_router.js?7b16fe70bccff9182aca02afb2ccd7708ac57c64:2227:55
Tracker.Computation.prototype._compute#http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:323:41
Tracker.Computation#http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:207:41
Tracker.autorun#http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:564:48
Router.prototype.start#http://localhost:3000/packages/iron_router.js?7b16fe70bccff9182aca02afb2ccd7708ac57c64:2223:68
Router/ eval:23:19959
1 meteor.js:944:47
The exception stops iron-router from rendering any template (the page just appears blank).
Exception only occurs on first load - if you refresh the page using a soft refresh (Ctrl/Cmd+R) then templates get rendered correctly.
The issue can be reliably reproduced with a hard refresh (Command/Ctrl+Shift+R)
Exception only happens on FireFox (running 40.0a2) - fine in other browsers.
Appears to be coming from the Meteor.defer call on line 44 of iron-router/lib/router.js (in the iron-router repository)
Repro repos
https://github.com/joeapearson/iframe-test (meteor app)
http://jsbin.com/qucuberupi/edit?html,output (jsbin with an iframe)
Any ideas about what could be going on?
Thanks for any help!
For reference, I've reported this as a potential issue here although I'm not necessarily convinced the issue lies in iron-router itself at all. I have a suspicion that this is somehow related to the HTML5 History API implementation in FireFox itself, which behaves differently in an <iframe> for some reason.
Workaround
Looks like it's possible to workaround this issue by dynamically creating the <iframe> before setting its location like this:
var body = document.getElementsByTagName('body')[0];
var iframe = document.createElement('iframe');
body.appendChild(iframe);
iframe.src = 'http://localhost:3000';
Still think this is something related to how FireFox is setting up the HTML5 history in the <iframe>. If you query history.state in the two differing iframes you get these results:
Dynamically created <iframe>
history.state // Object { initial: true }
Statically created <iframe>
history.state // null

AngularJS Routing Link does not work in Chrome

I have the following HTML to route to a different view:
Contact
The route works perfectly fine on Firefox, but gives the following error on Chrome/Safari:
GET http://localhost:55951/Contacts/Create 404 (Not Found)
It looks like WebKit is trying to actually go to the address, whereas in Moz there is no navigation, and AngularJs is handling the routing.
Any ideas what would be causing this?
For any novice AngularJs developer who stubles upon this problem like I did:
After lots of head banging, I read the console log carefully, which had a reference to jQueryMobile.js. Turns out jQueryMobile does not play nice with Angular.Js.
You can do a workaround with http://jacobmumm.com/2011/08/30/angularjs-with-jquery-mobile/. I just ended up removing jQueryMobile.

Angular routing without changing location

Chrome Packaged Apps have a rather strict Content Security Policy. One result of this is that manipulating the location (like clicking on a link) results in:
'Can't open same-window link to "chrome-extension://lkjasdfjklbdskjasdfjkhfdshjksad/derp.html"; try target="_blank". '
Target _blank will open the link in chrome which is not what I want. Can AngularJS' routing work in such a locked-down environment?
They docs give an example of an Angular app, but conspicuously does not use routing.
Update
Here is the link that, when clicked, gives the error: <a class='walrus-link' ng-href='paystubs/{{walrus.id}}'>Walrus {{id}}!</a>
Instead of using an href, try using ng-click and call a method to your controller the relocates to the appropriate page using $location. See the documentation on the AngularJS site. The following quote from the doc gives an indication that the $location service might be appropriate for you:
When should I use $location? Any time your application needs to react
to a change in the current URL or if you want to change the current
URL in the browser.
Your code might look something like this:
<a class='walrus-link' ng-click='getPaystub(walrus.id)'>Walrus {{id}}!</a>
and in your parent controller, you'll need a scope method called 'getPaystub' with a line similar to:
$scope.getPaystub = function(selectedWalrusId) {
$location.path('paystubs/'+$scope.walrus.id);
}
This way angular keeps control and won't cause a page refresh. This hopefully keeps you within the bounds of the CSP. Unfortunately I cannot test this in a packaged app, but I've used the exact same convention in a web app and it works just dandy.
routing works for me in my chrome app when not using $routeProvider's html5 mode (which is disabled by default), you just have to use a hash in the url.
so my links look like this:
About
$routeProvider configuration is as follows:
$routeProvider.when('/about', {templateUrl:'about.html'})

When accessing site from external network using IE JS/CSS(YUI) based UI is not working correctly

We have ASP.NET application in which we have used the YUI to generated the popup for user interface. Now when I amd testing the locally isntalled site the popups are comming correctctly withoug any error and also getting displayed correctly on all the browwsers (including IE 7/8/9).
However when the site is exposed on the server and i tried to test it from the outside network the YUI popup's are not getting genrated correclty like if some Javascript or CSS are not getting loaded or are cached. Generally Ctr+F5 does the trick to flush local cache and to fix the issue we have added query parameters xyz.css?v=10 trick. But its not working. Now this issue is showing only on the IE(6/7/8/9) and other browsers are working correctly. To check the issue i again logged into the production box and found that popup is appearing correctly on IE also.
Now i am not having clue how it could possibly happen. Does any one has came across anything like this? What could be the cause of the issue and how to fix it ?
Thanks
As far as I know, IE caches GET responses.
The xyz.css?v=10 trick is used when you want it to use cached CSS but only as long as it is the same version. Whenever you change something in the css you need to change the url (ie xyz.css?v=20).
If you want IE to NEVER use the cached css, you need the URL to look different everytime. you can do that by adding some timestamp to the url.
something like:
xyz.css?v=201201180600123
(201201180600123 is a timestamp)

Categories

Resources