Angular2路由器和快速集成

Question

我有一个使用Angular2路由器和表达的问题，但没有一个以前的问题似乎有我需要的解决方案。我正在使用angular2-cli的最新版本。

当我将浏览器指向localhost：3000时，我得到了angular2-cli生成的通用“app works”消息。当我尝试导航到其中一个子路由时，例如localhost：3000/auth/login，它会将我重定向到相同的“应用程序作品”页面，而不是向我显示一个页面，其中显示“登录作品” 。

看着堆栈交换其他问题，我想这个问题是在这里：

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生成的默认模板。

我不知道该怎么做。我甚至尝试多次重新启动并重写这个项目，看看我是否在某处出错（这是我的第三次尝试）。

Answer 1

对于angular2和整合的NodeJS你可以把这个在server.js：

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

，或者你可以使用代理服务器的Web服务器。例如，在虚拟主机标签内的Apache2你可以做

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

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

现在不是在你的HTTP请求的功能使用"http://localhost:3000/"（虽然你不使用它），你可以只使用"api/"。