Скачать или смотреть Solving 404 Errors in Angular Routing on IIS with Substrings JS or PNG

Learn how to handle Angular routing with `JS` or `PNG` substrings on IIS and avoid 404 errors. A simple guide to adjust your web.config for seamless routing.
---
This video is based on the question https://stackoverflow.com/q/63034759/ asked by the user 'Konrad' ( https://stackoverflow.com/u/778899/ ) and on the answer https://stackoverflow.com/a/63047971/ provided by the user 'Jokies Ding' ( https://stackoverflow.com/u/11944612/ ) 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: Angular routing with JS or PNG as substrings in route on IIS

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.
---
Handling Angular Routing with Substrings JS or PNG on IIS

When developing with Angular, it's essential to set up your routing properly, especially when deploying on a web server like Internet Information Services (IIS). A common challenge developers face is encountering 404 errors when the routed URL contains specific substrings, like JS or PNG. This blog aims to help you understand the problem and provide a clear solution to ensure your Angular application runs smoothly on IIS.

The Problem

You're running an Angular website on IIS, and you've defined routes using Angular's routing capabilities. Initially, everything works fine; however, when you try to access a URL that includes JS or PNG, you receive a 404 error. Below are the specifics of your setup:

Current Routing Configuration

You've defined your Angular routes as follows:

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

The Encountered Error

Working URL Example: https://domain/singlekey/DE1234 (This works perfectly and passes DE1234 as the lizKey parameter).

Failing URL Example: https://domain/singlekey/JS1234 (This results in a 404 error from IIS).

Understanding the Cause

The issue arises from how IIS handles certain requests based on the URL's last segment. By default, IIS intercepts requests that seem like file references (like .js, .png, etc.) and tries to serve them as static files rather than routing them through your Angular application.

The Solution

You'll need to adjust your web.config file to manage how requests are routed through IIS. Here's a step-by-step guide to fix the 404 error you’re facing.

Step 1: Modify Your web.config

Updating the web.config will allow your application to handle requests that contain substrings like JS or PNG. Here’s the revised setup you need to add to your existing web.config:

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

Step 2: Test your Configuration

After making changes to the web.config, be sure to test your application again. Try accessing both working URLs and the problematic ones (like https://domain/singlekey/JS1234 and https://domain/singlekey/PNG1234). If everything is set up correctly, you should not experience any 404 errors.

Key Points to Remember

The web.config file is crucial for the proper routing of requests on IIS.

Ensure that your URL matching conditions are correctly capturing routes meant for your Angular application.

Regularly test your application after making changes to configurations.

Conclusion

By updating your web.config file to handle requests with substrings like JS or PNG, you can effectively eliminate the 404 errors that arise within your Angular routing setup on IIS. A proper configuration ensures that your application runs flawlessly, providing a smooth user experience.

Feel free to share your experiences or any further questions you might have in the comments below!