Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
557 views
in Technique[技术] by (71.8m points)

angular - Angular2 routing / deep linking not working with Apache 404

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]);
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...