Hi everyone,
My question is: how can we delegate incorrect URL paths to the web server instead of handling them on the Angular side?
#ANGULAR DEPLOYMENT
vestal kernel
pastel granite
What is your use-case? Asking because there might be a better solution to your actual problem than the one you're thinking about.
vague light
It depends on how you are deploying Angular. If you're not doing SSR, then "deploying Angular" is just setting up a server to serve a bunch of static files. So, that already does exactly what you described. Just deploy whatever other static stuff you want to be served with Angular.
If you're doing SSR, you probably want a reverse proxy in front of the Angular server (something like Nginx) and you can then use it to route between Angular and whatever else.
vestal kernel
What is your use-case? Asking because there might be a better solution to your a...
the deployment is a simple deployment using nginx so it's not SSR, my case is I do have two versions, the en under "/" and the fr under "/fr" the problem is when I try to navigate form the en to the fr angular show me "Error: NG04002: Cannot match any routes. URL Segment", so what I need is deligating the wrong paths to the web server
vestal kernel
It depends on how you are deploying Angular. If you're _not_ doing SSR, then "de...
thanks for the response unfortunately I'm not doing SSR because I was implementing I18N and the i18n wasn't supported by the SSR
vague light
I think you have to make sure that when you link to /fr that you use a normal <a href and not routerLink, so that the browser does the navigation (and therefor will use a normal HTTP request to your server) instead of Angular trying to do a router navigation to the (nonexistent) route.
vestal kernel
Indeed that's what I'm doing but angular handle it
vague light
Huh... That goes against my understanding of how this should work. Give me a few minutes, I'm going to do some tests.
I can't reproduce what you are saying. If I use href the browser does a full navigation and the web server serves the resulting page. Is your web server configured correctly to output the fr app for /fr routes and does the fr App know how to handle the fr routes?
Check in the Network tab of the browser dev tools, if the request goes to the server you should be able to see it there
vestal kernel
yes indeed If I try to get go to the fr using the browser directly I got the fr version but using the the href I got as I said before cannot match any route
vague light
Please check in the network tab, is a full navigation being performed when you click the link?
vestal kernel
you can check it with me https://zakariabali.com/ (The animation is a little bit slow you can navigate down to the footer then you will see french is anchor tag)
vague light
The French link in the footer works fine for me.
It does a full navigation and now I see the french version
The problem shows with the "Anglais" link on the French page though, because that has href="0", which results in /fr/0 being visited (by the browser) and then the French app complains, because 0 is not a route it has.
The reason for that (I think) is this:
vestal kernel
ty to navigate from this page https://zakariabali.com/experience
vague light
The + unary prefix coerces pageRoute to a number, resulting in 0
vestal kernel
to the fr
vague light
That does a full navigation to /fr/experience
vestal kernel
but we got an error
vague light
The fr app is loaded correctly and then reports that there is no such route
Yes, your FR app has no /fr/experience route.
vestal kernel
but if you access the fr version from the home then you try to get access experience using the link in the sidebar you will get the route https://zakariabali.com/fr/experience
vague light
Actually, yeah you are right. Your webserver is configured wrong. It serves the EN app for /fr/experience
Please show your webserver config
vague light
I think you need to swap the location / and location ^~ /fr/ blocks
Because location / also matches /fr/experience and it comes first, so it is picked...
vestal kernel
sure I will test it in a moment
thanks a lot
even after the swap still getting the same error
because from the freecodecamp handbook the prefix is more prioritized
vague light
Hmm. But for some reason /fr/experience responds with the English version
Try to remove the ^~, it shouldn't matter here. I was mistaken about the order having any significance
According to the documentation, Nginx will pick the longest prefix that matches
Personally I've never used ^~
vague light
Sorry, but this is now something I don't know anymore. According to my (limited) understanding of Nginx this should work...