Angular 2 Routing : 404 page not found on refresh
Method — 1
In app.module.ts:
- Add imports:
|
1 |
import { HashLocationStrategy, LocationStrategy } from '@angular/common'; |
And in NgMoudle provider, add:
|
1 |
{provide: LocationStrategy, useClass: HashLocationStrategy} |
Example (app.module.ts):
|
1 2 3 4 5 6 7 8 9 10 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { HashLocationStrategy, LocationStrategy } from '@angular/common';@NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}], bootstrap: [AppComponent], }) export class AppModule {} |
Method — 2
Use RouterModule.forRoot with the {useHash: true} argument.
Example:(from angular docs) (app-routing.module.ts)
|
1 2 3 4 5 6 7 8 9 10 |
import { NgModule } from '@angular/core'; ...const routes: Routes = [//routes in here];@NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot(routes, { useHash: true }) ], bootstrap: [AppComponent] }) export class AppModule { } |
If still have issue then update .htaccess file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews </IfModule> RewriteEngine On # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html # to allow html5 state links RewriteRule ^ index.html [L] </IfModule> |
We love your content. Regards from Pissouri Bay Divers from Cyprus.