CODEWITHSUNDEEP
asp.net-mvcangular
Muhammad Atif
Muhammad Atif

Reputation: 1102

Angular 2 routing issue - 404 error on refresh or reload

I am facing an issue related to angular routing. All pages work fine but if page is reload or refreshed it give 404 error.I am using path location strategy. I have searched a lot but found thing except hash location strategy.I have tried Hash location strategy but is adds # in url (Like webiste.com/home#contact) but i want url without #.

I need experts guide as i am stuck after searching 3 4 days

Thanks in advance

Upvotes: 4

Views: 2220

Answers (1)

Mario Petrovic
Mario Petrovic

Reputation: 8312

Depending on what server you are using, you need to configure your routing to point to index.html always.

Of course you need to set <base href="/"> in <head> of your index.html

If you refresh url site.com/myPage, server will try to get resource with name myPage, in your case will return 404.

WAMP settings

Options -Indexes

RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) index.html [NC,L]

IIS settings

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Upvotes: 2

Related Questions