Angular View fails to load from template, when rendered via PhantomJS - angularjs

I have an Angular application that is leveraging template caching (part of our Gulp build process). The application runs fine, the cached views load... Except when rendered through PhantomJS (or Google's Pagespeed or Fetch as Google for that matter).
After much investigation, I found that routing is throwing this error:
Error: [$compile:tpload] Failed to load template: /static/app/public/views/about.html (HTTP status: undefined undefined)
I am assuming the HTTP status of undefined is related to the fact that no round trip is occurring... but I can't find any information on why this would fail, and especially why only when using the above mentioned tools.
To summarize:
App runs fine on Chrome, IE, Firefox, Opera
The cached template .js file contains the necessary path and html content
The path fails to resolve when loading through PhantomJS, Speedtest renderer, or Google's "Fetch as Google" tools
I have reviewed the Angular documentation on why this error is thrown, but it still doesn't make sense, the template has been populated (as the file template .js has been loaded)
Edit
I added the following line for debugging:
var about = $templateCache.get('/static/app/public/views/about.html');
console.log('about', about);
... and I see the proper output in the console log, even with PhantomJS.

It turns out that I was ignoring another error message:
Error: undefined is not a constructor (evaluating 'newUrl.startsWith(target)')
... happening due to PhantomJS's ES5. I didn't think the two issues were related, but after providing a polyfill for String.prototype.startsWith, the issue went away.

Related

AngularJS issue: $sce:insecurl despite $sce.trustAsResourceUrl

I have a set-up using templates from my CDN, that usually works fine but periodically I get this error:
ng-error: Error: [$sce:insecurl] http://errors.angularjs.org/1.7.5/$sce/insecurl?p0=https%3A%2F%2Fcomplicemail-herokuapp-com.global.ssl.fastly.net%2Fstatic%2Ftemplates%2Fviewschedule.a15ce4bf.html
I grepped the codebase for viewsched, and literally the only two places in the code where that template are my precache list in my service worker, and this line in the angularjs file:
$scope.scheduleTemplateUrl = $sce.trustAsResourceUrl('/templates/viewschedule.html')
Gulp turns that line into the one that references the CDN:
$scope.scheduleTemplateUrl = $sce.trustAsResourceUrl('https://complicemail-herokuapp-com.global.ssl.fastly.net/static/templates/viewschedule.a15ce4bf.html')
I know that part's working because the insecurl error shows the CDN url.
My first guess that the issue is something like "for whatever reason (eg shoddy internet) the browser couldn't connect with the CDN at that moment and failed to fetch the file, giving some sort of HTTP response code that AngularJS considers insecure. But I think that would produce this issue (which I also periodically get)
ng-error: Error: [$templateRequest:tpload] http://errors.angularjs.org/1.7.5/$templateRequest/tpload?p0=https%3A%2F%2Fcomplicemail-herokuapp-com.global.ssl.fastly.net%2Fstatic%2Ftemplates%2Ftimer%2Fuser-other.27734af8.html&p1=-1&p2=
Any ideas? Also interested in ideas for how to more gracefully handle the tpload error situation in cases like this where the url is correct but the internet just conked out at that moment.

ERROR: Firebase Database (${JSCORE_VERSION}) INTERNAL ASSERT FAILED: Reference.ts has not been loaded

I get error message when I am loading my Webapp with IE10 and below IE version.
I am building an my Webapp with React 15.4.0 and firebase 5.5.0.
I have tested the Webapp with Chrome, Firefox, IE11 and it's working fine.
Try to comment line below in file "firebase-js-sdk/src/database/api/Query.ts" may help you to solve this error.
assert(__referenceConstructor, 'Reference.ts has not been loaded');
Other work around are also available in link below that you can try to check.
Firebase Database (4.3.1) INTERNET ASSERT FAILED: Reference.ts has not been loaded.

Protractor Test: Error: Angular could not be found on the page

While running multiple test suits on CBT via jenkins parallel, Jenkins get slower and page takes more time to load on CBT and hence it shows below error(which is intermittent)
Error: Angular could not be found on the page Https:xxx.xyz.com If this is not an Angular application, you may need to turn off waiting for Angular.
If is not angular application, you need to turn of wait for angular. Usually login pages are not angular:
browser.waitForAngularEnabled(false);
To check if is angular, open dev tools and in console just write "angular", if page is angular will return object, if not will return "Uncaught ReferenceError: angular is not defined".

Debugging a React Azure Web App

I've got a React app running on Azure. It runs fine in my localhost, however, when I go to the Azure address, it doesn't load; all I get is a blank page with a head and body html element, which is throwing the following error:
Uncaught SyntaxError: Unexpected token <
The immediate question, of course, is what's causing the error and how do I fix it?
The bigger question in the background is, with a backend app, I can enable logging and look at a log stream and see what's throwing errors in real time. With a frontend app, the errors are happening in my browser; the React Chrome extension doesn't even recognize this as a React app. How do I debug in this context?

Timed out waiting for Protractor to synchronize -- happens on server, but not on localhost

I'm writing a suite of Protractor tests from the ground up for a new Angular webapp. My team has asked me to run my tests against their Test server instance. I've got my config file and a basic test spec set up, but as soon as I hit the main page and do a simple expect() statement, I get "Timed out waiting for Protractor to synchronize with the page after 11 seconds."
Here's my test:
describe('the home page', function() {
it('should display the correct user name', function(){
expect(element(by.binding('user.name')).getText()).toContain(browser.params.login.user);
});
});
I cloned the dev team's git repo, set it up on my localhost, changed my baseUrl and ran my Protractor test against it locally. Passed without a hitch.
After some conversation with the dev team, I've determined that it's not a $http or $timeout issue. We use both of those services, but not repeatedly (I don't think they're "polling"). None of them should happen more than once, and all the timeouts are a half-second long.
What else could cause Protractor to time out like that? I wish it failed on my localhost so I could go tweak the code until I find out what's causing the problem, but it doesn't.
I have discovered the solution: check for console errors.
Turns out, one of our $http requests wasn't coming back because my Protractor tests were accessing the page via https, but one of our xhtml endpoints was at a non-secured location. This resulted in a very helpful console error which I had not yet seen, because it only occurred when accessing the site with WebDriver.
The error text: "The page at [url] was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint. This request has been blocked; the content must be served over HTTPS."
I modified my baseUrl to access the site via regular http, and now everything is working fine.

Resources