web-dev-qa-db-ja.com

404 Not Found nginx angular routing

Angularアプリケーションがあります。コマンドng build --prod --aotdistフォルダーを生成します。 distフォルダーにStaticfileという名前のファイルを作成し、次のコマンドでdistフォルダーを pivotal.io にアップロードしました。

  1. cf push name-app --no-start
  2. cf start name-app

アプリはうまく動作します。 nav barがあるので、navbarでパスを変更すると、すべて正常に機能します。しかし、私が手動でそれを行うと（私は自分でURLを入力します）、このエラーがあります404 Not Found nginx。これは私のapp.component.ts：

const appRoutes: Routes = [
  { path: 'time-picker', component: TimePickerComponent },
  { path: 'material-picker', component: MaterialPickerComponent },
  { path: 'about', component: AboutComponent },
  { path: 'login', component: LoginComponent },
  { path: 'registration', component: RegistrationComponent },
  {
    path: '',
    redirectTo: '/time-picker',
    pathMatch: 'full'
  }
];

@NgModule({
  declarations: [
    AppComponent,
    TimePickerComponent,
    MaterialPickerComponent,
    DurationCardComponent,
    AboutComponent,
    LoginComponent,
    RegistrationComponent,
  ],
  imports: [RouterModule.forRoot(
    appRoutes
    // ,{ enableTracing: true } // <-- debugging purposes only
  ),
    FormsModule,
    BrowserAnimationsModule,
    BrowserModule,
    MdCardModule, MdDatepickerModule, MdNativeDateModule, MdInputModule

  ],
  providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('fr-br');
  }
}
angularnginxcloudfoundryangular-routingpivotal-cloud-foundry
12
Melchia

最終的に答えを見つけました：distフォルダーを生成した後。

  • Staticfileというファイルを作成し、distフォルダーに配置しました
  • Staticfileを開き、この行を追加しましたpushstate: enabled

pushstateを有効にすると、複数のルートを提供するクライアント側のJavaScriptアプリのブラウザーで表示されるURLがクリーンになります。たとえば、pushstateルーティングは、/ some＃path1ではなく/ some/path1のように見える複数のアンカータグ付きURLへの単一のJavaScriptファイルルートを許可します。

7
Melchia

Staticfileを使用していない人は、これを試してみたいかもしれません。

私はnginxサービングアングルで同じ問題を抱えていました。以下はデフォルトの設定ファイルで、おそらく/ etc/nginx/sites-available/yoursiteのどこかにあります。

     location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            try_files $uri $uri/ =404;
    }

しかし、実際に欲しいのは...

     location / {
            # First attempt to serve request as file, then
            # as directory, then redirect to index(angular) if no file found.
            try_files $uri $uri/ /index.html;
    }
24
Sven Dhaens

あなたのnginx.confファイルを使用してみてください：

try_files $uri $uri/ /index.html;

の代わりに：

try_files $uri $uri/ =404;

Angular 5プロジェクト。

12
Mad Javad

これはAngular side of thingsではなく、サーバー側の問題です。あなたのケースnginxの各リクエストのインデックスまたはランディングページを返すのはサーバーの責任です。

[〜＃〜] update [〜＃〜]

何らかの方法でこれを構成できるバックエンドまたはサーバーがない場合は、2つの回避策があります。

  • AngularでHashLocationStrategyを使用する
  • Index.htmlファイルの調整 link No -15
2
Rahul Singh

角度アプリケーションは、単一ページのアプリケーションです。アドレスを手動で入力すると、アプリケーションが実行されていない場所にルーティングしようとします。

ベースページにルーティングするには、nginxの設定を編集する必要があります。

1
Carsten

私にとってそれは許可の問題でした、Nginxはあなたがdistを置いたディレクトリの所有者でなければなりません、私はnginxログファイルでこのエラーを見ました

"root/../../dist/index.html" failed (13: Permission denied)

だから私は私のdistを含む最上位フォルダのnginxユーザーに許可を与えました

chown nginx . -R //  to give nginx the permissions on the current directory, and everything in it.

そして、あなたはnginxを再起動する必要があります

Sudo systemctl restart nginx

そしてそれは動作するはずです！

0
Fateh Mohamed