We are running ASP.NET Zero Angular on Nginx for an application we are about to launch. As angular is using its routing functionality, so by default, if one were to refresh the page, Nginx returns a 404 error as it can't find the routed path.
To correct this, we have added the following section to the Nginx configuration:
location / { try_files $uri $uri/ /index.html?$args; }
This is working, to the degree that if you perform a browser refresh, then the page now partially loads. The issue is that the paths for various assets are being distorted.
For example, we have a path on the site called Account/Login which is accessed like so:
http://site.name/Account/Login That page has a CSS file located within the assets folder. Normally when accessing the page completely through Angular routing (i.e. no refresh re-write), it would be located here:
http://site.name/Assets/CSS/Login.css What we are finding is that when the page is refreshed, and re-written, whilst it loads, the asset path distorts and becomes:
http://site.name/Account/Login/Assets/CSS/Login.css I suspect that this has nothing to do with Nginx and is, in fact, some configuration needed on the Angular side that will specify how the paths are referenced, but we are pretty new to Angular, so not sure where to start.
Any ideas?
6 Answer(s)
-
0
Is it related to this? https://github.com/angular/angular-cli/issues/1080#issuecomment-226655134
-
0
You can copy the web.config file (https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/web.config) into the root of your published angular app.
-
0
Hi,
Sorry for delay. So the issue is similar in that the problem is the same, where it differs however is that i am not serving it from a subfolder, its already in the root of the domain.
Thanks for that other link, but we are using using Nginx not IIS. Do you have an Nginx configuration file to use? We have already added the redirect to index.html to get the routing working, it's just the assets that are messed up.
Thanks,
UPDATE:
Just tried with IIS, using your config file and i have exactly the same problem.
I am building Angular using ng build --prod
is there anything else needed?
you can see an example of the problem here: https://cripto.compradivisas.com/account/login
-
0
Hi @greatsamps
What happens if you remove the config you have added
location / { try_files $uri $uri/ /index.html?$args; }and use the web.config I have mentioned ?
-
0
Hi,
So thats what i tried last. I ran it under IIS using your web.config and i had the same issue. My config was in the nginx config file which was not present under IIS.
The whole thing feels like it is to do with relative paths settings. Surely there must be a way to tell Angular / ABP that the assets directory is always under root, never relative?
-
0
@greatsamps is your app accessible to public ? If so, could you share its address with [email protected] ?
