Angular2路由器和Express集成

我在使用Angular2路由器时遇到了问题，但是以前的问题似乎没有解决scheme。 我正在使用angular2-cli的最新版本。

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

看看堆栈交换的其他问题，我认为这个问题在这里：

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

当我用*replace*时，而不是redirect到我的目标页面，它给了我无法GET错误。

总之，我的问题是我的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/" （尽pipe你没有使用它），你可以使用"api/" 。