Angular deployment - 404 on page Refresh

Question

i would like to deploy my app in Angular to production server but I have problems. App works corectly when I use only angular routing (change component, not redirecting) but when I refresh the page in browser, I get a 404 page returned from IIS (I use IIS as the web server)

Here is my angular routing:

const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', canActivate: [AuthGuard] },
    { path: 'home', component: DashboardComponent, canActivate: [AuthGuard] },
    { path: "profile", component: UserProfileComponent, canActivate: [AuthGuard] },
    { path: '400', component: ErrorComponent },
    { path: '401', component: ErrorComponent },
    { path: '403', component: ErrorComponent },
    { path: '404', component: ErrorComponent },
    { path: '500', component: ErrorComponent },
    { path: '503', component: ErrorComponent },
    { path: '**', redirectTo: '/404' }
]

you are implemented `[AuthGuard]` to some of your routes, so you must have to use `providers` in `app.routing` file like this `providers: [AuthGuard, LoginService]` to register `services` which you use for `[AuthGuard]` . Did you do that? — nivas, Jul 13 '17 at 05:52
Routes are defined in routing.module.ts which use in app.module where is provider AuthGuard. Must be provider in routing.module or only in app.module? — bluray, Jul 13 '17 at 05:54
you have to declare it in `routing.module.ts` with @NgModule decorator — nivas, Jul 13 '17 at 05:55
We had a similar issue in node, we had to redirect these requests to our /dist/index.html file. Hopefully someone who has seen this in IIS can give you the code, chances are it's a setting in your web.config. — Graham, Jul 13 '17 at 06:09
Possible duplicate of [Angular2 not loading when directly browsed to route address or on refresh](https://stackoverflow.com/questions/41351052/angular2-not-loading-when-directly-browsed-to-route-address-or-on-refresh) — Graham, Jul 13 '17 at 06:11
Can you show example of web.config or tell me what i must have in web.config. i havent web.config in my app — bluray, Jul 13 '17 at 06:11
Please take a look at the link above, you are definitely encountering the same issue as what that person saw. — Graham, Jul 13 '17 at 06:14
Yes, he has the same problem. But i must havebase href="./" when i have only / app not load. — bluray, Jul 13 '17 at 06:15

score 21 · Answer 1 · answered Feb 19 '20 at 08:06

21

This work for angular 8, add .htaccess to your project file

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews -Indexes
</IfModule>

RewriteEngine On

# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]

answered Feb 19 '20 at 08:06

Segun Adeniji

370
5
11

3

This is for Apache, not IIS – Benjineer May 27 '20 at 05:24
2

This works for me, i dont see why i should add hash to every url – Jude Okoroafor Nov 10 '20 at 14:32
2

Works for me too! Can someone please explain what this is doing exactly? – Mandeep Vratesh Dec 12 '20 at 04:50
Also works for React. – Mario Werner Jan 24 '22 at 13:43

score 12 · Answer 2 · answered Feb 12 '19 at 08:05

12

If you are using angular 6,7 this method works (If you are okay with /#/ in your URL.

In app.module.ts

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

After import add following line to providers.

{provide: LocationStrategy, useClass: HashLocationStrategy}

ex:

providers: [AuthService, 
            AuthGuard, 
            FlxUiDataTable,
            {provide: LocationStrategy, useClass: HashLocationStrategy}]

This will solve your issue. Read Documentation here.

answered Feb 12 '19 at 08:05

Nimezzz

1,814
14
15

1

for angular 6 and above this is the perfect solution – Zain Ul Abidin Apr 03 '21 at 18:05
Yep, this is the way to go – XamlZealot Oct 03 '22 at 21:06

score 9 · Accepted Answer · edited Jul 15 '17 at 13:11

9

I modified the web.config in my app:

<configuration>
  <system.webServer>
<rewrite>
    <rules>
        <rule name="redirect all" stopProcessing="true">
            <match url="^(.*)$" ignoreCase="false" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
            </conditions>
            <action type="Rewrite" url="./" appendQueryString="true" />
        </rule>
    </rules>
</rewrite>
  </system.webServer>
</configuration>

In index.html is <base href="./">. Refreshing the page is now ok.

edited Jul 15 '17 at 13:11

Graham

7,431
18
59
84

answered Jul 13 '17 at 06:53

bluray

1,875
5
36
68

this works with angular 4 and net core 2.0. great find – sensei Feb 08 '18 at 20:36
After trying your approach, my APIs are not working and producing status code 302. Do you have any clue? – Amrinder Singh Nov 06 '22 at 07:04

score 7 · Answer 4 · edited May 23 '23 at 07:56

This will work on following servers.

Apache Server

Add .htaccess on root to your project

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [L]
</IfModule>

IIS Server

Add web.config

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Imported Rule 1" stopProcessing="true">
          <match url="^(.*)/$" ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Redirect" redirectType="Permanent" url="/{R:1}" />
        </rule>
        <rule name="Imported Rule 2" stopProcessing="true">
          <match url="^" ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Nginx Server

make changes on server file Instead of using: try_files $uri $uri/ =404;

try using: try_files $uri $uri/ /index.html;

        server {
                listen 80;
                listen [::]:80;
        
                root /var/www/example.com/html;
        
            index index.html index.htm index.nginx-debian.html;
        
                server_name example.com www.example.com;
        
                location / {
                    try_files $uri $uri/ /index.html;
                 }
        }

This is the only way it should work personally am not a fun of the hashtag. — Hussein Haule, Feb 18 '22 at 14:30

score 1 · Answer 5 · answered Sep 26 '20 at 00:52

My initial workaround was to just redirect on 404 back to root, and so far, I don't see a down-side to this. To my surprise, both the request path and parameters persist when refreshing. This is in an IIS 10 environment with Angular 9, and a Chrome-only (internal app) so there may be other factors at play that I'm unaware of that are only making this seem sustainable. Will try to remember to come back to my answer should we discover something.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpErrors>
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" prefixLanguageFilePath="" path="/" responseMode="ExecuteURL" />
        </httpErrors>
    </system.webServer>
</configuration>

score 0 · Answer 6 · answered Jun 09 '21 at 03:00

This worked for me:

Add web.config to /src

 <configuration>
 <system.webServer>
     <rewrite>
         <rules>
             <rule name="redirect all" stopProcessing="true">
                 <match url="^(.*)$" ignoreCase="false" />
                 <conditions logicalGrouping="MatchAll">
                     <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
                 </conditions>
                 <action type="Rewrite" url="./" appendQueryString="true" />
             </rule>
         </rules>
     </rewrite>
 </system.webServer></configuration>

On angular.json, on asset add

"src/web.config"

score 0 · Answer 7 · answered Dec 02 '22 at 10:56

I fix this bug by adding { useHash: true } to RouterModule.forRoot() in the app.module.ts or app-routing.module.ts. For example:

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
  ],
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  providers: [

  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Angular deployment - 404 on page Refresh

7 Answers7

Linked