Angular2ルータとExpress統合

Question

Angular2ルータとexpressを使用しているときに問題が発生していますが、上記の質問のどれも私が必要とする解決策がないようです。私は最新のバージョンのangular2-cliを使用しています。

localhost：3000にブラウザを誘導すると、angular2-cliが生成する一般的な「app works」メッセージが表示されます。私の問題はlocalhost：3000/auth/loginのような私の子供のルートの1つに移動しようとすると発生します。 "login works"というページを表示するのではなく、同じ "app works" 。

スタック交換上の他の質問を見て、私は問題がここにあることを把握：

app.get('*', (req, res) => { 
     res.sendFile(path.join(__dirname, 'dist/index.html')); 
    }); 

私が代わりに戻って私のターゲットページに私をリダイレクトする、それは私与え、/と*交換した場合エラーを取得できません。

要約すると、私の問題は、私のエクスプレスアプリに統合された私のangular2経路のURLナビゲーションが機能していないことです。

次のようにserver.jsマイエクスプレスコードは：

var express = require("express"); 
var app = express(); 
var bodyParser = require("body-parser"); 
var mongoose = require("mongoose"); 
var path = require("path"); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended:true})); 

app.use(express.static(path.join(__dirname, 'dist'))); 

// Catch all other routes and return the index file 
app.get('*', (req, res) => { 
    res.sendFile(path.join(__dirname, 'dist/index.html')); 
}); 

app.listen(3000,() => { 
    console.log("Server has started"); 
}); 

（APP-routing.module.ts）を次のように私のアプリケーションのルーティングモジュールである：

import {Route, RouterModule} from '@angular/router'; 
import {NgModule} from '@angular/core'; 
import {LoginComponent} from './login/login.component'; 
import {RegisterComponent} from './register/register.component'; 
import {FeedComponent} from './feed/feed.component'; 
import {FindComponent} from './find/find.component'; 
import {SubmitComponent} from './submit/submit.component'; 
import {ProfileComponent} from './profile/profile.component'; 

export const routeConfig = [ 
    { 
     path: "auth", 
     children: [ 
      { 
       path: "login", 
       component: LoginComponent 
      }, 
      { 
       path: "register", 
       component: RegisterComponent 
      }, 
      { 
       path: "", 
       redirectTo: "/login", 
       pathMatch: "full" 
      } 

     ] 
    }, 
    { 
     path: "app", 
     children: [ 
      { 
       path: "feed", 
       component: FeedComponent 
      }, 
      { 
       path: "find", 
       component: FindComponent 
      }, 
      { 
       path: "submit", 
       component: SubmitComponent 
      }, 
      { 
       path: "profile", 
       component: ProfileComponent 
      }, 
      { 
       path: "", 
       redirectTo: "/feed", 
       pathMatch: "full" 
      } 
     ] 
    } 
]; 

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

} 

マイアプリケーションモジュールであります

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import {AppRoutingModule} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { LoginComponent } from './login/login.component'; 
import { RegisterComponent } from './register/register.component'; 
import { FeedComponent } from './feed/feed.component'; 
import { FindComponent } from './find/find.component'; 
import { SubmitComponent } from './submit/submit.component'; 
import { ProfileComponent } from './profile/profile.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    RegisterComponent, 
    FeedComponent, 
    FindComponent, 
    SubmitComponent, 
    ProfileComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AppRoutingModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

すべてのコンポーネントはそれぞれのファイルで定義されており、ベアボーンangular2-cliによって生成されるデフォルトテンプレート。

私はこの時点で何をすべきか分かりません。私はこのプロジェクトを何度も再起動して書き直してみましたが、どこかに間違っていたかどうかを確認しました（これは私の3回目の試みです）。 angular2については

Answer 1

、あなたがserver.jsでこれを置くことができるいずれかの統合nodejs：

var cors = required('cors'); 
app.use(cors()); 

またはあなたのWebサーバにプロキシを利用することができます。例えば、バーチャルホストタグ内のapache2で、あなたのhttpリクエスト機能で今すぐ代わりの"http://localhost:3000/"を使用して

ProxyPass /api/ http://localhost:3000/ 

ProxyReverse /api/ http://localhost:3000/ 

を行うことができます（あなたがそれを使用していないが）あなただけ"api/"を使用することができます。