node.js - 路由无法正常工作

Question

我创建了一个 Angular 2 应用程序。这是app.routes.ts

import { Routes } from '@angular/router';
import { RoleListComponent } from './role-list.component';
import { RoleEditComponent } from './role-edit.component';

export const appRoutes: Routes = [
    {
        path: 'role-list', component: RoleListComponent
    }

    , {
        path: 'role-edit', component: RoleEditComponent
    }
    , {
        path: '', redirectTo: '/role-list', pathMatch: 'full'
    }
];

屏幕上有两个按钮可以导航到该页面。然后我在 bs-config.js

中使用 http-proxy-middleware 配置代理

bs-config.js

var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/services', {
    target: 'http://localhost:9000',
    changeOrigin: true
});

module.exports = {
    port: 9001,
    server: {
        baseDir: "src",
        routes: {
            "/node_modules": "node_modules"
        },
        middleware: {
            1: apiProxy,
        }
    }
};

现在，当我启动应用程序时，它会点击 http://localhost:9001/role-list 并在屏幕上显示错误消息

Cannot GET /role-list

如果我点击localhost:9001，它就会工作并在地址栏中显示http://localhost:9001/role-list URL，但如果我直接点击相同的URL，它会显示上述错误。

现在，如果我删除代理中间件，它就可以正常工作。我不明白这是什么问题？我配置有问题吗？可能的问题是什么？

Answer 1

您的问题出在服务器端。

您需要将每个 Angular 路由(在服务器端)路由到 index.html 中指定的基本路径。例如，这是在 nodeJS 中完成的:

app.get('/*', (req, res) => {
    res.render('index', {req, res});
});

或Apache:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

否则，当您的客户访问 www.example.com/path/someThing 时，您的服务器将在 /var/www/example.com/path/someThing/ 中查找 index.html 文件，而不是 /var/www/example.com/