33

私はAngular 2ルーティングの例に従っています。「lite」Webサーバーを使用すると、ルートからナビゲートでき、ディープリンクが機能しますが、Apacheを使用するとルートからナビゲートできますが、ルートへの直接のリンクをたどると404 Not Foundエラーが発生します。

たとえば、次の URL は、npm によってポート 3000 で開始された「lite」Web サーバーに対して機能します。

http://localhost:3000/crisis-center/2

しかし、ポート 80 で実行されている Apache に対する次の URL は失敗します。

http://localhost/crisis-center/2
The requested URL /crisis-center/2 was not found on this server.

同様の Angular 1 の問題に対して推奨される .htaccess ソリューションをいくつか試してみましたが、うまくいきませんでした。Apache で Angular 2 のルーティングとディープ リンクを使用したことがある場合は、どうやってそれを達成したか教えてください。

@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]);
4

8 に答える 8

56

他の回答は、Apacheで動作させたいかどうかという質問に実際には答えていません。HashLocationStrategyは引き続きオプションですが、Apache でそのまま動作させたい場合は、次の手順を実行する必要があります。

.htaccessと同じ場所に新しいファイルを作成しますindex.html。次のコードが内部になります。

<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>

（質問では、<base href="/crises-center/">内部index.htmlは RewriteBase と同じでなければならないことに注意してください）

Angular 2ルーティングからの質問+回答から適応された回答 と特定のルートへの直接アクセス:Apacheの構成方法?

于 2016-04-13T06:56:27.730 に答える
6

app.routes.module.ts の angular4/angular の場合、以下のように useHash を含めます。

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})
于 2017-07-19T14:04:00.553 に答える
1

サーバーがindex.htmlに戻るすべてのルートを処理するようにするか、使用する必要がありますHashLocationStrategy

( https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html )

を見てみましょう：

HTML5ルートを使用するとAngular 2のルーターが壊れますか?

于 2016-01-15T16:58:16.970 に答える