web-dev-qa-db-ja.com

ルーティング方法angular 4

angular 4プロジェクトがあり、localhost:4200/route-aから実行すると正常に動作し、ブラウザーを更新するとすべて正常に動作します。ただし、 ng buildをApacheから実行し、localhost/route-aに移動すると、404が返されます。ルーティングのコードは次のとおりです。

imports: [BrowserModule, HttpModule, FormsModule, RouterModule.forRoot([
    { path: 'home', component: HomeComponent },
    { path: 'route-a', component: RouteAComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
  ])]
angularapacheangular4-router
9
Sam Ziggler

Angularの問題ではありません。Apacheの設定に問題があります。AngularでHTML5モード（かなりのURL）を使用している場合は、すべてのリクエストを送信するようにApacheを構成する必要があります。サーバー上にindex.htmlファイルのリソースが存在しません。

これは、次の.htaccess構成で実行できます。

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

その理由は、/route-aにアクセスしようとすると、Apacheサーバーがデフォルトでディレクトリroute-aとその中のindex.htmlファイルを見つけようとするためです。しかし、そのディレクトリがないため、Apacheは404エラーを返しますか。

しかし、Apacheに伝えることで、場所やファイルが存在しないリクエストに応じて。 Angular htmlファイルを指定して送信するには、Angularルーターがそこから取得します。

24
Doehl

Apacheバージョン2.2.16以降、これにはFallbackResourceディレクティブを使用できます。

<Directory "/var/www/my_blog">
  FallbackResource index.php
</Directory>

チェック https://httpd.Apache.org/docs/trunk/rewrite/remapping.html#fallback-resource

5
Sameera roshan