Refresh issue on angular component - javascript

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.

Related

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.

Google Drive Api in Angular

I am facing some difficulties in apply the google drive api to my angular web app. I tried copying the code from https://developers.google.com/drive/api/v3/quickstart/js to my components html but I keep getting an error that says
zone-evergreen.js:171 Uncaught {error: "idpiframe_initialization_failed", details: "Not a valid origin for the client: http://localhosā€¦itelist this origin for your project's client ID."}
However, when I put it as a normal index.html without it being in an angular app, the client id is valid. Is it possible that it is because of how angular renders the components, resulting in 'async defer' to be not working? If so, how do I resolve this.
I tried using #types/gapi and gapi-auth2 but I also encounter errors that the module cannot be found. I did many fixes like adding the compilerType but it still does not work so I am trying to use the default html. Thank you.

Refreshing page with React/Laravel application breaks app returns blank page

I have a react application that sits on the Laravel 5.4 framework.
The problem I'm having is that on a page refresh with a URL such as https://app.com/{url}/{slug} breaks the application.
Here is my router component that sits in App.js
<Router>
<div className="App__container container-fluid">
<Navigation />
<Switch>
<Route path="/films" component={FilmsContainer}/>
<Route path="/films/:slugname" component={FilmPage}/>
</Switch>
</div>
</Router>
Refreshing the page through the browser when the FilmsContainer component is displayed works properly as I have the routes for Laravel configured to return the main layout that holds the React application whenever any web route is hit via this code here.
Route::get('{slug}', function() {
return view('main');
})->where('slug', '(?!api)([A-z\d-\/_.]+)?');
However, an issue comes when this Link component is hit,
<NavLink className="btn btn-success" to={`/films/${slugName}`}>View Film</NavLink>
On the first click, react router successfully renders the component with the correct url, for example: https://www.app.com/films/this-film-name.
However when I refresh the page on this url, the react application breaks,
returning an error in the Javascript console:
Uncaught SyntaxError: Unexpected token < app.js:1
When refreshing the page on any url that matches the www.app.com/{route}/{slug}
pattern, the app breaks and nothing is rendered, all I see is a blank white page in the browser.
I've tried using browserHistory and also setting other routes in Laravel web routes file, such as:
Route::get('films/{slug}', function() {
return view('main');
})->where('slug', '(?!api)([A-z\d-\/_.]+)?');
to try and match the extra params in the routes and serve the main html file that holds the application.
None of this seems to be working and I'm a little confused, is this a Laravel issue? Do I have react router configured incorrectly? Any advice would be greatly appreciated, thanks!
It looks to me like you may be calling app.js from a relative path. Like <script src="app.js"></script> and so in the films directory it's actually calling https://www.app.com/films/app.js and getting a 404, but Laravel's sending HTML from that https://www.app.com/films/app.js URL, hence the Uncaught SyntaxError: Unexpected token < error.
When React Router is changing the browser URL from page to page, that is all done on the client side. You make 1 request to the server for index.html (or index.php), and the rest is taken care of by React Router. Click the button, change the URL, change the content to display, all within index.html.
When you refresh, however, you're making a new request to the server for this weird URL it doesn't know how to handle -- it only knows how to serve up your main index file. I'm not too familiar with PHP, but to fix this you just need to tell your server to fall back to your main file. This post might guide you in the right direction. When Laravel gets a URL it doesn't know how to handle, it should fall back to your index file, which will get served up and then in the browser React Router will handle the routing.

CherryPy terminates session after $window.location.href

For a Django 1.8 app with Angular.js & Django Rest Framework I'm using CherryPy server to serve the app over WSGI.
For this purpose I'm basically reusing this code, which works fine, until I use the following angular.js command in one of my *.js files:
url = patientDetailView + response.data.id + '/';
$window.location.href=url;
The view this link is pointing to requires (like other views as well) the user to be logged in(authenticated). However, although the user has been already logged in after $window.location.href=url django redirects to the login screen where the user needs to log-in again! My guess is that this may be due to the session being terminated (?). I don't see this problem while running the django dev server (./manage.py runserver)
Anybody can point me to why this is happening and how to fix that? I'm running out of ideas...

angular parses url with LocationHashbangUrl but $locationProvider.html5Mode(true) is set

I encounter a strange behaviour with angular and html5Mode:
When i enter an url of the SPA i can see in the debugger that initally the LocationMode is LocationHashbangUrl even though $locationProvider.html5Mode(true) is set.
So the Url is first parsed by LocationHashbangUrl.
Then after angular has executed $locationProvider.html5Mode(true) the url gets parsed again.
I compared this to a rather simple example implementation from this http://plnkr.co/edit/DA3Oq6?p=info there it is not the case and angular starts with LocationHtml5Url right away.
I suspect that this causes troubles with the browser back button.
When i use the backbutton of the browser i can see in the debugger that the url is first parsed again by LocationHashbangUrl instead of LocationHtml5Url and this causes a Url change to an empty path.
I use angular 1.2.28 and angular-route 1.2.28 in a requirejs context.
Btw this is a followup of angular routes are in history but browser back jumps to first entered url
I found the reason:
There was a module bootstrapped before the actual main application and this was the reason for the inital LocationHashbangUrl object.
Setting $locationProvider.html5Mode(true); in this module as well solved it.

Categories

Resources