I am following the Angular 2 routing examples. Using the "lite" webserver I am able to navigate from the root and deep linking works, but using Apache I can navigate from the root, but get 404 Not Found errors when following links direct to routes.
For example the following URL works against the "lite" webserver started on port 3000 by npm.
http://localhost:3000/crisis-center/2
But the next URL against Apache running on port 80 fails.
http://localhost/crisis-center/2
The requested URL /crisis-center/2 was not found on this server.
I did try a few .htaccess solutions recommended for similar Angular 1 issues but no luck. If anyone has had Angular 2 routing and deep linking work on Apache please do let me know how you achieved that.
@RouteConfig([
{ // Crisis Center child route
path: '/crisis-center/...',
name: 'CrisisCenter',
component: CrisisCenterComponent,
useAsDefault: true
},
{path: '/heroes', name: 'Heroes', component: HeroListComponent},
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]}
])
Boot.ts
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
As the other answers don't really answer the question for if you want it to work with Apache. HashLocationStrategy remains an option, but if you want it to work as is on Apache you need to do the following:
Create a new file .htaccess
in the same location as your index.html
. The following code will be inside:
<IfModule mod_rewrite.c>
Options Indexes FollowSymLinks
RewriteEngine On
RewriteBase /crisis-center/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
</IfModule>
(Note that in the question the <base href="/crises-center/">
inside the index.html
should be identical to the RewriteBase)
Answer adapted from question+answer from Angular 2 routing and direct access to a specific route : how to configure Apache?
For those who's running on Apache use this .htaccess
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
</IfModule>
If you still get an error run those 2 commands:
sudo a2enmod rewrite
sudo systemctl restart apache2
For angular4/angular in app.routes.module.ts include useHash as below,
@NgModule({
imports: [RouterModule.forRoot(routes, {useHash: true})],
exports: [RouterModule]
})
According to Rein Baarsma answer you have to create .htaccess
file and put it in the same directory as your index.html
on your Apache server. It might be for example htdocs
directory, but this depends on your Apache configuration.
However I use different .htaccess
file content and it works for me for all links/routes without necessity to specify rewrite base:
<IfModule mod_rewrite.c>
Options Indexes FollowSymLinks
RewriteEngine On
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
It is a modification of code provided by Rein Baarsma.
My app is Angular 2+ (4.x.x) application based on angular-cli project. It hardly depends on direct URLs to addresses provided by Angular routing. Without .htaccess
file above I got 404 not found
after clicking every direct URL link. Now with use of this .htaccess
file everything works fine.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With