Скачать или смотреть How to Configure nginx for Angular 9 Apps with i18n Support

This guide walks you through configuring nginx with proxy_pass to effectively handle API calls for Angular 9 applications using i18n.
---
This video is based on the question https://stackoverflow.com/q/65632318/ asked by the user 'Kubadev' ( https://stackoverflow.com/u/3887851/ ) and on the answer https://stackoverflow.com/a/65668175/ provided by the user 'Kubadev' ( https://stackoverflow.com/u/3887851/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Configure nginx proxy_pass alongside baseHref?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving API Calls in Angular 9 with i18n on Nginx

If you're managing an Angular 9 application that supports internationalization (i18n) and needs to run behind an Nginx server, you might have hit a roadblock when trying to handle your API calls. In scenarios where you've structured your application to handle multiple languages (like French and English), your API calls can get tricky. Specifically, you may find that your URLs are structured as /fr/api/some_request or /en/api/some_request, causing problems in routing and API interaction. In this post, we will dive into how to properly configure Nginx to work seamlessly with your Angular application and its API calls.

Understanding the Problem

When you build your Angular project with i18n, your static files are output into separate directories based on the language, such as:

[[See Video to Reveal this Text or Code Snippet]]

Each language version has a base URL, leading to API calls that include language prefixes (/fr/api/ or /en/api/). However, the API needs these calls simplified to just /api/, so it can function correctly. Without this transformation, your API will not receive requests as intended, causing errors in your application.

Nginx Configuration Solution

To resolve the issue, we will configure the Nginx server to properly redirect the requests. Here’s how to set up your Nginx configuration file:

Step 1: Understanding Location Blocks

Nginx uses location blocks to determine how to handle requests based on their URI. We need to take advantage of regex-based location blocks to catch all incoming requests that match the API pattern. Here's how to do it:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Break Down the Configuration

location ~ ./api/(.): This regex configuration will match any URI that contains /api/, regardless of where it appears in the path.

Example matching URIs:

example.com/api/foo/bar

example.com/api/

example.com/something/api/foo/bar

proxy_pass http://rest-api:9000/api/$1: When a match is found, the request will be proxied to the backend API, replacing the match with what's captured by .*. The $1 variable corresponds to the dynamic part of the request that occurs after /api/, allowing for flexible API calls.

Step 3: Complete Nginx Configuration Example

Here is how your complete Nginx configuration might look:

[[See Video to Reveal this Text or Code Snippet]]

Final Steps

Test Your Configuration: Make sure to check the syntax of your Nginx configuration with the command:

[[See Video to Reveal this Text or Code Snippet]]

Restart Nginx: After testing, restart Nginx to apply your changes:

[[See Video to Reveal this Text or Code Snippet]]

Validate your API Calls: Access your Angular app and ensure that the API calls work correctly across different language versions.

Conclusion

By configuring your Nginx server to properly handle proxy passes for API requests in an Angular 9 application with i18n, you can create a seamless user experience regardless of the language selected. This approach not only keeps your API calls clean but also helps maintain the structure of your application effectively.

If you encounter any issues, revisit your configurations and ensure the regex match works as expected. Happy coding!