Angular 6 build, Error 404 Not Found when refresh

Question

I have facing a problem 404 page not found in production build when refresh a page. Build working fine with # routing RouterModule.forRoot(routes, { useHash: true }). But I want a pretty route without #

My module look like

  @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    CoreModule,
    AppRoutingModule,
    AuthModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

Answer 1

Create .htaccess file in your index.html location

<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /example/example/
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . index.html [L]
 </IfModule>

Note:RewriteBase /example/example is a your index.html base url

<base href="/example/example/">

Answer 2

The reason why 404 Not Found is showing on page refresh is that all Angular routes should be served via the index.html file.

You can fix this issue by adding a .htaccess file (in the same directory where the index.html resides) with the following contents.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

Follow below link for further details regarding deploying production build to Apache:

https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2

Answer 3

Deep urls are called SPA support, by default node's http-server doesn't support, but it can be enabled this way-

http-server --gzip --proxy http://localhost:8080?

Answer 4

For Apache

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

For Nginx

try_files $uri $uri/ /index.html;

For IIS

<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="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

For GitHub pages

you can't directly configure the GitHub Pages server, but you can add a 404 page. Copy index.html into 404.html. It will still be served as the 404 response, but the browser will process that page and load the app properly. It's also a good idea to serve from docs/ on master and to create a .nojekyll file

For Firebase Hosting

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

Source