Angular url problems on IIS

Question

I deployed my dot net core 3.1 api and angular 9 app into IIS. Api works well. When I hit the url for login it works well and took me into my Dashboard. http://192.168.15.12:8020/ePortal/home.

After that when I click on my other component say I wants to go to Color. When I click on Color the urls is http://192.168.15.12:8020/home/color-details instead of http://192.168.15.12:8020/ePortal/home/color-details that's why it shows 404(not found) error.

I've build the production using ng build --prod --base-href /ePortal/ and also add an web.config to rewrite the url

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/ePortal/" />
        <!--<action type="Rewrite" url="/" /> /ePortal/-->
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

I can't identify the problem. Help please

Shajir Haider · Accepted Answer · 2020-10-28 06:28:59Z

2

It is an angular routing issue. You are using relative path but you need to use absolute pathing for this. try add "/" before your routerlink.

Example: instead of routerLink = "color" use routerLink = "/color"

Update

use this

<a mat-list-item href="color-details">Color</a>

edited Oct 28, 2020 at 6:28

answered Oct 28, 2020 at 6:15

Shajir Haider

363 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pasha Over a year ago

<a mat-list-item href="/home/color-details">Color</a> I used this.

Pasha Over a year ago

When I click on Color the url should be http://192.168.15.12:8020/ePortal/home/color-details but it's not rewritting. it goes on http://192.168.15.12:8020/home/color-details

Pasha Over a year ago

Thans a lot. It'll be <a mat-list-item href="home/color-details">Color</a> the error occurs due to / before home

Dako patel · Accepted Answer · 2020-10-28 06:40:37Z

0

Solutation

you can not redirect different path dir into angular,so you need to add custom for it

Example :

<a href="home/color-details">Color</a>

answered Oct 28, 2020 at 6:40

Dako patel

9306 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular url problems on IIS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related