How to fix Angular route path not working for direct URL when deployed to production | Angular | LSC 

Glad it was helpful!

Thank you for the note. Yes, you need to install URL Rewrite for IIS if not installed already.

I am glad to hear this. You don't need to copy manually. In the angular.json file, just add the web.config after the assert. When building, it will be copied to deployment files

Try this solution if your app is deployed on Linux box learnsmartcoding.com/angular/solving-angular-app-routing-issue-linux-server-apache/ hope this will help you.

Hello, You can solve this by increasing the limit in angular.json file. Here is an example link, you can increase to more than your build size. Remember, you got this error as your overall bundling size is more than default for your project. github.com/learnsmartcoding/lsc-restaurant-table-booking-app/blob/main/angular.json#L40 Let me know if you have any other questions. Don't forget to subscribe if you haven't ! Happy coding!

Hi santosh, is your app deployed to windows or Linux server? This video is gor windows server for iis. Happy coding!

Try this solution if your app is deployed on Linux box learnsmartcoding.com/angular/solving-angular-app-routing-issue-linux-server-apache/ hope this will help you.

Hi Binny, Could you please explain a bit more on what is not working so that I can help you solve. Thanks.

Hi Binny, The solution I showed works only for Windows Server, IIS. For Linux, you need to modify on .htaccess file. Here is the post for the issue. learnsmartcoding.com/angular/solving-angular-app-routing-issue-linux-server-apache/ Hope this helps you.

Hi , you should place the web.config file with the content I provided to your deployed folder. It will work for sure. Please verify web.config file is present

Hi , The solution I have explained will definitely work as I have personally implemented in my projects and also, I showed a live demo. Please check the below t make sure we are doing it correctly. 1. Take the file from here github.com/learnsmartcoding/angular-beginners-course-shopping-app/blob/main/src/web.config 2. Place this in src folder in your project and add this in angular.json (here you should include in right place, not in test project) 3. run this command in local "npm run --prod" once the dist folder is created, check web.config file is present in the final build content. If it is there then the web.config file will be deployed as well and it will work. Please mention where are you deploying your application and did you restart website after deploying? Thanks, Karthik

Hi Wakeup Tamizha, The solution I showed works only for Windows Server, IIS. For Linux, you need to modify on .htaccess file. Here is the post for the issue. learnsmartcoding.com/angular/solving-angular-app-routing-issue-linux-server-apache/ Hope this helps you.

Hi Khalid, The solution I showed works only for Windows Server, IIS. For Linux, you need to modify on .htaccess file. Here is the post for the issue. learnsmartcoding.com/angular/solving-angular-app-routing-issue-linux-server-apache/ Hope this helps you.

@@learnsmartcoding Thanks i will try this, I appreciate your help 🙏

Hi Kriti, is your angular app deployed in Windows server or Linux? This solution works for Windows, and for Linux, the setup to resolve this issue is different.

Hi Playatanu, did you follow the steps and use the web.config mentioned in this demo? It should work. Thanks, learnsmartcoding

Your method only work for microsoft iis servers

So, are you trying with the Linux server? If so, the concept is the same, the incoming request should be routed to index.html, and rest angular routing will take care

Yes

@@playatanu The solution I showed works only for Windows Server, IIS. For Linux, you need to modify on .htaccess file. Here is the post for the issue. learnsmartcoding.com/angular/solving-angular-app-routing-issue-linux-server-apache/ Hope this helps you.