Angular2サーバーのURLナビゲーション

Question

手動でURL（またはページの更新）を入力するとき、Angular2の特定のコンポーネントに移動する方法の基本的な理解のために、Webを精査しました。私はほぼ2歳のベータangular2の実装を除いて何も見つけることができませんでした（Such as here）。私はノード/エクスプレスを使用している単純な角度のWebアプリケーションを持っています。クライアント側のナビゲーションをうまく動かせるが、クライアントにサーバー要求を処理させると、これはどのように動作するのか、実装方法はわからない。誰も助けることができます。

私はちょうどやっています： http://localhost:3000/login - これはアプリでナビゲートするときにうまく動作しますが、更新するとうまくいきません。私は単純にこれを実装する方法には多大なリソースがあると思いますが、何か基本的なものを見つけるのは大したことではありませんでした。ありがとう！

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

app.module.ts：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './components/app.component'; 

import { LoginComponent } from './components/auth/login'; 
import { IndexComponent } from './components/home/index'; 

import { PageNotFoundComponent } from './components/not-found.component'; 


@NgModule({ 
    imports:  [ BrowserModule, 
    RouterModule.forRoot([ 
    { 
    path: 'login', 
    component: LoginComponent 
    }, 
    { 
    path: '', 
    component: IndexComponent 
    }, 
    { path: '**', component: PageNotFoundComponent } 
])], 
    declarations: [ AppComponent,IndexComponent,LoginComponent,PageNotFoundComponent ], 
    providers: [ ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

Answer 1

は、サーバーのルーターの定義を参照することは素晴らしいことです。

アプリでナビゲートするとき、これは正常に動作しますが、私はそれが

あなたは何を意味するのかを動作しない更新すると？あなたのサーバは404ステータスコードで返信しますか？お使いのブラウザは上のGETリクエストを行う/ index.htmlにして、クライアントに返されます：ローカルホスト上の

• Nagivate：3000

  はそうであれば、ここで何が起こっているのです。

• その後、角度が起動し、デフォルトのコンポーネントをインスタンス化、IndexComponent
• 次に、あなたがローカルホストを指すリンクをクリックしてください：3000 /ログイン
• ここでは、何の要求がちょうど右のコンポーネントをインスタンス化、サーバーに角度行われません：LoginComponent
• リフレッシュすると、ブラウザはlocalhost：3000/loginでGETリクエストを行います。このルートは存在しないため、404が表示されます。あなたの問題を解決するために

、あなたのファイルを提供するために、ワイルドカードを使用します。

<base href="/"> 

：

app.get('*', (req, res) => { 
    res.status(200).sendFile(indexFile); 
}); 

Answer 2

あなたはすべての要求をしなければならないルートAngular2アプリのタグを含むビューを返します。あなたのURLが何であっても、同じビューがロードされ、Angular2はルーティングを処理します。

How to handle angular2 route path in Nodejs

Answer 3

は、次のような<header>セクションの何かであなたのindex.htmlに入れてみました時にはそれも必要です：

<base href="/index.html">