Угловой2 маршрутизатор и экспресс-интеграция

Question

У меня проблема с использованием маршрутизатора Angular2 и выражением, но ни один из предыдущих вопросов, похоже, не имеет необходимого мне решения. Я использую последнюю версию angular2-cli.

Когда я направляю свой браузер на localhost: 3000, я получаю общее сообщение о работе приложения, которое генерирует angular2-cli. Моя проблема возникает, когда я пытаюсь перейти к одному из моих дочерних маршрутов, например localhost: 3000/auth/login - он перенаправляет меня обратно на одну и ту же страницу «Работы с приложениями», вместо того, чтобы показывать мне страницу с надписью «Вход в систему», ,

Глядя на другие вопросы по обмену стеком, я полагаю, что этот вопрос находится здесь:

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

Когда я заменить * с /, вместо того, чтобы перенаправить меня к моей целевой странице, он дает мне не может GET ошибка.

Таким образом, моя проблема заключается в том, что навигационная навигация моих маршрутов angular2, встроенных в мое экспресс-приложение, не работает.

Мой экспресс-код в 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"); 
}); 

модуль маршрутизации моего приложения выглядит следующим образом (приложение-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 { } 

Все компоненты были определены в соответствующих файлах и являются barebones шаблоны по умолчанию, генерируемые угловым2-cli.

Я понятия не имею, что делать в этот момент. Я даже пытался перезапустить и переписать этот проект несколько раз, чтобы увидеть, что я где-то ошибся (это моя 3-я попытка).

Answer 1

Для angular2 и nodejs интеграции вы можете поместить это в server.js:

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

или вы можете использовать прокси-сервер в вашем веб-сервере. Например, в apache2 внутри тега VirtualHost вы можете сделать

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

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

Теперь вместо того, чтобы использовать "http://localhost:3000/" в функции запроса HTTP (хотя вы его не используете), вы можете использовать только "api/".