web-dev-qa-db-ja.com

Angular-要求されたURL / homeはこのサーバーで見つかりませんでした

私は非常に簡潔になります。

Angularシンプルなナビゲーションメニュー（routerLinks）を備えたプロジェクトがあります。すべてが、angular cli。

しかし、実際のサーバー（VPSや他のサーバーがなく、ファイルを置くことができるフォルダーのみ）にデプロイすると、奇妙なことが起こり始めます。

アプリは機能的で、ナビゲーションは機能的で、routeLinksルーティングですが、ブラウザを更新するか、URL行に何かを手動で書き込もうとすると、404 Not foundが表示されます。 （だから私は[domain]/homeにいます-すべては大丈夫ですが、ブラウザを更新すると404/homeが見つかりませんでした。

たぶん私は悪い場所で問題を探していますが、それはangularの問題ではなく、HTTPリクエストに関する問題です（私はそれについてあまり知りません）。

どこから始めればいいのか分かりますか？

ありがとう、パベル・F.

私が話しているプロジェクト： http://www.pavel-challenge.cz （いいえ、これは広告ではありません：D）

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PassionsComponent } from './passions/passions.component';
import { QuestionComponent } from './question/question.component';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { KnowledgeComponent } from './knowledge/knowledge.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'knowledge', component: KnowledgeComponent },
  { path: 'questions', component: QuestionComponent },
  { path: 'passions', component: PassionsComponent },
  { path: '**', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

navbar.component.html

  <ul>
    <li><a routerLink="/about">About</a></li>
    <li><a routerLink="/knowledge">Knowledge</a></li>
    <li><a routerLink="/questions">Questions</a></li>
    <li><a routerLink="/passions">Passions</a></li>
  </ul>
angularurlhttp-status-code-404
10
Pavel Franta

修正済み：（Apache HTTPサーバー用）

.htaccessファイルを作成し、プロバイダー側​​のルートフォルダーに配置します。

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
24
Pavel Franta

問題はHTTPサーバーの設定にあります。

angularアプリケーションを埋め込むHTMLリソースを指すホスト名の後にすべてのURLを作成する必要があります。

nGINXのように：

 location / {
       root <path to index.html>;
       try_files $uri  /index.html =404;
( if ressource exist serves it, likes images, else load index.html to load angular app )
    }

公式ドキュメントはこちら

初期ロード後にナビゲートしている間、angularルーターが先頭に立ち、httpリクエストなしで動的に場所を変更した後にデータを表示します。

ただし、<...>/homeに直接ロードする場合、httpサーバーは確実にファイルhome.htmlをロードしてから404を送信しようとします。

3
Pierre Mallet

チェックアウト

https://angular.io/docs/ts/latest/guide/deployment.html

本番サーバーを構成する必要がある理由を説明し、一般的なサーバーのかなりの数の構成例を提供します。

0
Nofi

Apacheにデプロイする場合は、mod_rewriteモジュールを有効にする必要があります。

Sudo a2enmod rewrite

次にApacheを再起動しますSudo systemctl restart Apache2

その後、前の回答に従って.htaccessで提案された変更を行います

0
Aser Yehia