Develop Reference

Refresh issue on angular component

We are working on a web app using angular 8. When we are on the page of a certain component and we press ctrl+f5 or refresh from browser, we get white page and this list of error:
from the "unchaught syntaxError: unexpected token '<' " we understood that the browser is trying to load a script but gets a .html file insted. The problem is that inside our index.html file, every single script is commented and there is no "scripts.js". How can i solve/what is the possible problem?

Try using use hash routing configuration
routerModule.forRoot(routes, { useHash: true })
Angular will start handling the redirections himself, instead of deffering it to the server.
Right now your issue is that the server has to handle the redirections, and tons of different errors can happen when it's not set up properly.

Vanilla JS Single Sign-On attempt with MSAL.js leading to pop-up window showing a copy of the same page

I've copied the example app at this repository to try to implement single sign-on: https://github.com/Azure-Samples/ms-identity-javascript-v2. I've changed the config values match those of the Azure configuration. I'm using the public version of the authority: "https://login.microsoftonline.com/[APP VALUE HERE]" in this configuration as well.
For additional background - I had previously not had the redirectURL correctly matching, and the popup window from running the example showed my user account name before failing with an error. From this I take it to mean that the sign-on itself was successful in recognizing me, and that any problems are happening after that point.
The problem I'm running into now is that the SSO popup just loads an exact copy of the page that I used to launch the request in the first place - exact same display and everything. My logging shows that the request to myMSALObj.loginPopup({scopes: ["User.Read"]}) never completes, it simply hangs until I close the popup window, at which point it fails into the catch block for that request with the following error: "BrowserAuthError: user_cancelled: User cancelled the flow."
So it seems like the process is waiting for some step that never occurs, presumably coming as part of the call within the popup window. Has anyone else encountered this issue before? Does anyone have any recommendation for how to fix it or how to dig deeper into what's occurring?

This usually happens if the page you use as your redirectUri is either clearing the url hash on load or redirecting to another page on load. We usually recommend people use a blank page that doesn't implement any logic as their redirectUri to avoid issues like this. If that's not possible try to see what might be causing the server response to be removed from the popup.

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

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.

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'})

Force reload of a directive's template

I am working on an AngularJS app with several directives. The directive's templates are stored in a separate html file. When editing these template, my browser does not detect any changes after a reload and always uses a cached version. Any other changes to the source code are detected and lead to a reload.
I guess the problem is somewhat the $templateCache which seems to be used by AngularJS when loading the template.
What I found in the source code of AngularJS 1.0.2 is the following from line 4317 which is part of the compileTemplateUrl():
$http.get(origAsyncDirective.templateUrl, {cache: $templateCache})
I am wondering if anyone else had this kind of problem and if there is a way to tell AngularJS when to cache and when not.

I know this is an old question, but here's a simpler fix, although it's a bit of a hack, it works for me, and doesn't require you to do anything to $templateCache.
Whenever I run into this problem (I see it in directive templates, but also static JSON files), I add a query parameter to the end of the URL being loaded, like this:
...
templateUrl: "partials/template.html?1",
...
Whenever I make a changes to the template, and it's not reloading, I increment that number at the end. As the browser doesn't know if this might mean something special to the server, it should attempt to reload that changed URL whether it's cached or not. This will also make sure the file is reloaded in the production environment.

The template cache is stored in your browser, as this is a javascript app. You can actually feed the $cache manually or stop your browser from caching the templates (as it would seem that for production, cache won't be a problem), using developer tools.
For force feeding the cache:
function Main($cache) {
$cache.data['first.html'] = {value: 'First template'};
$cache.data['second.html'] = {value: '<b>Second</b> template'};
}
Main.$inject = ['$xhr.cache'];​
See it working in this fiddle.
To stop your browser from caching the templates (cited from this Google Groups post, about this problem, exactly):
My team and I have ran into this same issue. Our solution for
development while using Chrome was to open Developer Tools, and select
the gear in the bottom right hand corner. Then select Network -
Disable cache.
This fixed all our partial/template caching issues.

app.controller('someCtrl', function ($scope, $cacheFactory, templateRequest)
{
$scope.refreshTemplate = function ()
{
var tpl = "<template name>";
$cacheFactory.get('templates').remove(tpl);
$templateRequest(tpl).then(function ok(){
console.log("Template "+tpl+" loaded.");
});
}
...
}
then when you call the refreshTemplate function you cause a re-load