404が見つかりませんnginx angular 4ルーティング

Question

私は角度のアプリケーションがあります。 distフォルダを生成するには、ng build --prod --aotというコマンドを実行します。 は私がStaticfileという名前のファイルを作成したdistのフォルダで、私は次のコマンドを使用してpivotal.ioへのdistフォルダをアップロード：

1. CFプッシュ名-アプリを--no-開始
2. CFは名前のアプリを起動します

アプリが正常に動作します。私はnav barを持っているので、navbarでパスを変更するとすべて正常に動作します。しかし、私は手動で（私は自分自身にURLを入力する）このエラーがある404見つかりません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'); 
    } 
} 

EDIT

は静的ビルドは自分のアプリケーションには向いていないですか？いったん角型アプリケーションがプロダクトの準備ができたら、次に何をすべきでしょうか？すべてのあなたの反応は私がすでにバックエンド側を持っていると仮定します。あなたは慎重に私の記事を読んでくださいできますか？

Answer 1

私は最終的に答えた：私はdistのフォルダを生成した後 を。

• は、私は私が有効になってpushstate: enabled

pushstateが奉仕のJavaScriptアプリケーションのクライアント・サイドのためのクリーンなブラウザ可視URLを保持します。この行を追加Staticfile & を開け

Staticfileと呼ばれるファイルを作成しました複数の経路。たとえば、pushstateルーティングでは、単一のJavaScriptファイルが、/ some＃path1の代わりに/ some/path1のような複数のアンカータグ付きURLにルーティングされます。

Answer 2

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

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

Answer 3

これは、サーバ側の問題であり、角側の問題ではありません。あなたのケースでは、リクエストごとにインデックスまたはランディングページを返すのはサーバーの責任です。nginx任意の手段によって、あなたが設定することができ、バックエンドまたはサーバーをお持ちでない場合は

UPDATEは

この2つの回避策があります。 index.htmlをファイルにいくつかの微調整を作る角度

でHashLocationStrategyを使用して

ない

• linkませ-15

Answer 4

スタティックファイルこれを試してみてください。

私は、nginxが角度をつけているのと同じ問題を抱えていました。 次はyoursite /おそらくどこかで見つかったの/ etc/nginxの/サイト利用可能な、デフォルトの設定ファイルである

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

しかし、私たちがacctuallyたいことはある...

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