SSR Angular Universal sometimes getting HTTP 404 errors

[ramon-b]

When I use Angular Universal and send concurrent requests, I receive multiple 404 errors. Translations are loaded via HTTP and I use initialNavigation via this package only. The function translateText tries to translate the route, but _translationObject is sometimes not defined. As far as I can see, there are no significant differences between my code and what is described in the documentation.

[gilsdav]

Hello @ramon-b ,

As I know, Angular universal never return a 404 error but always a 200 if you have a wildcard '**' route. Did you managed the 404 yourself like in this article ? Or directly on the server file (express app) ?

Can you check this example ? https://github.com/gilsdav/angular-universal-localize-router

[ramon-nl]

Hi, thanks for your reaction.

The 404 errors are managed via a wildcard route and a status-code header. I do not get 404 errors if I set a timeout of several seconds for the resolve of the init function. Testing with ApacheBench (10 requests with a concurrency of 10) gives different results on several executions.

I checked the example already, but I did not see significant differences.

[ramon-b]

I have done further investigation and I see that the 404 errors are coming from routes loaded via the loadChildren function. The problem seems related to https://github.com/gilsdav/ngx-translate-router/issues/45, because _loadedConfig gives undefined. I have a routing module with an item that has loadChildren. The path of that item in the routing module gets translated, but the routes in my child module do not get translated.

This is my order of imports in my child module:

RouterModule.forChild(routes),
LocalizeRouterModule.forChild(routes),
TranslateModule

[ramon-b]

The issue can be reproduced via the https://github.com/gilsdav/angular-universal-localize-router example, by requesting /heros/accueil (ab -c 10 -n 10 http://localhost:4000/heros/accueil). That gives several 'Cannot match any routes' errors. Without concurrency (ab -n 10 http://localhost:4000/heros/accueil), no errors occur.

I added the option alwaysSetPrefix with value false and the option useCachedLang with value false. I also added a LocalizeRouterStaticLoader which sets the locales array to ["fr"].

[gilsdav]

Be careful with your configuration. You have to keep in mind that client side will take the browser lang by default but server side will that the first element of your locales array. So to not have issues, please set the defaultLangFunction with the lang of your "non prefix" routes.

alwaysSetPrefix: false,
useCachedLang: false,
defaultLangFunction: () => 'fr'

I made a fix on version 3.1.2 prerelease. Can you try it by installing package using npm i https://github.com/gilsdav/ngx-translate-router/releases/download/3.1.2/gilsdav-ngx-translate-router-3.1.2.tgz ?

[ramon-b]

I changed the configuration for the example to replicate the configuration in my application. I have extra configuration in place to deal with things like the browser language.

Thanks for providing a fix, which seems to be working fine.

[gilsdav]

Fixed in version 3.1.2

[gvestit]

Hi @gilsdav ,

I tried the wildcard on https://github.com/gilsdav/angular-universal-localize-router but i get:

ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: 'en/dasdasd' at Recognizer.noMatchError (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/@angular/router/fesm2022/router.mjs:3687:12) at eval (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/@angular/router/fesm2022/router.mjs:3720:20) at eval (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/rxjs/dist/esm/internal/operators/catchError.js:10:39) at OperatorSubscriber.OperatorSubscriber._error (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/rxjs/dist/esm/internal/operators/OperatorSubscriber.js:19:21) at OperatorSubscriber.error (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18) at OperatorSubscriber._error (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30) at OperatorSubscriber.error (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18) at OperatorSubscriber._error (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30) at OperatorSubscriber.error (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18) at OperatorSubscriber._error (c:/xampp/htdocs/ssr-test/angular-universal-localize-router/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30) { code: 4002

Edit: Finally I fixed adding : into translations json