如何在 Nodejs 中处理 angular2 路由路径？答案

【问题标题】：How to handle angular2 route path in Nodejs?如何在 Nodejs 中处理 angular2 路由路径？
【发布时间】：2016-04-23 05:24:25
【问题描述】：

我正在使用 Angular2 开发 NodeJS 应用程序。在我的应用程序中，我有一个主页和搜索页面。对于主页，我有一个 HTML 页面，它将为 localhost:3000/ 呈现，并且从主页用户导航到 search 即 localhost:3000/search我由 angular2 routes 处理的 strong> 页面。

我没有搜索页面的页面，它的视图由 angular2 呈现。但是当我直接点击 localhost:3000/search 因为我的节点应用程序中没有此路由时，它会给出错误。

我不知道如何在节点应用程序中处理这个？

【问题讨论】：

您应该使用 angular2 路由，使用 # 之后的路径作为 localhost:3000/#/search。这样 Angular 2 将获取请求，而不是服务器
但是 angular2 生成的路线没有#
配置您的服务器以重定向到您的起始页。快速搜索后我found this
但在我的情况下它不是 404 请求，如果我这样做它只是呈现主页而不是搜索页面和 404 请求也
我的错，我的意思是说如果找不到请求的uri，您需要配置服务器以返回您的起始页面（通常是index.html）...我不知道如何在节点中执行此操作，我正在使用其他服务器（.htaccess 用于 php，用于本地服务器的中间件，python 中的路由......），但希望这可以引导您找到正确的答案......

标签： node.js angular angular2-routing

【解决方案1】：

如果您直接在浏览器导航栏中输入localhost:3000/search，您的浏览器会向您的服务器发出“/search”请求，可以在控制台中看到该请求（确保选中“保留日志”按钮）。

Navigated to http://localhost:3000/search

如果您运行完全静态的服务器，则会产生错误，因为服务器上不存在搜索页面。例如，使用 express，您可以捕获这些请求并返回 index.html 文件。 angular2 bootstrap 启动，@RouteConfig 中描述的 /search 路由被激活。

// example of express()
let app = express();
app.use(express.static(static_dir));

// Additional web services goes here
...

// 404 catch 
app.all('*', (req: any, res: any) => {
  console.log(`[TRACE] Server 404 request: ${req.originalUrl}`);
  res.status(200).sendFile(index_file);
});

【讨论】：

那么如果有404请求我该如何处理
使用@RouteConfig 像这样：@RouteConfig([ { path: '' , component: HomeCmp, name: 'HomeCmp' }, { path: 'search' , component: SeachCmp, name: 'SearchCmp ' }, { path: 'error', component: ErrorCmp, name: 'ErrorCmp' }, { path: '**', redirectTo: ['ErrorCmp'] } ])
很好的答案。此外，如果您不使用 TypeScript，它可能类似于 app.all('*', function (req, res) { res.status(200).sendFile(path.join(__dirname, '/index.html')); });

【解决方案2】：

你需要使用 HashLocationStrategy

import { LocationStrategy, HashLocationStrategy } from "angular2/router";
bootstrap(AppComponent, [
 ROUTER_PROVIDERS,
 provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

在您的引导文件中。

如果您想使用 PathLocationStrategy（不带 # ），您必须为您的服务器设置重写策略。

【讨论】：

提供从 ?? 进口？
从“angular2/core”导入{提供}；啊对不起
您能否提供更多详细信息：如果我想使用 PathLocationStrategy（不带 #）我为我的服务器设置的重写策略是什么

【解决方案3】：

我一直在研究这个话题很长一段时间，并尝试了很多不起作用的方法。如果您使用 angular-cli 和 express ，如果选择的答案不适合您，我找到了解决方案。

试试这个节点模块：express-history-api-fallback

[Angular] 更改您的 app.module.ts 文件，在 @NgModule 下 > 导入如下：

RouterModule.forRoot(routes), ...

这就是所谓的：“定位策略”

您可能正在像这样使用“哈希定位策略”：

RouterModule.forRoot(routes, { useHash: true }) , ...

[ 快递 & 节点 ] 基本上你必须正确处理 URL，所以如果你想调用与 HTML5 Location Strategy 不冲突的“api/datas”等。

在您的 server.js 文件中（如果您使用 express 生成器，为了清楚起见，我将其重命名为 middleware.js）

第 1 步 - 需要 express-history-api-fallback 模块。

const fallback = require('express-history-api-fallback');

第 2 步。你可能有很多路线模块，……。喜欢：

app.use('/api/users, userRoutes);
app.use('/api/books, bookRoutes); ......
app.use('/', index); // Where you render your Angular 4 (dist/index.html)

注意你写的顺序，在我的例子中，我在 app.use('/',index); 下调用模块；

app.use(fallback(__dirname + '/dist/index.html'));

* 确保它在您处理 404 或某事之前。像那样。

这种方法对我有用 :) 我正在使用 EAN 堆栈（Angular4 与 cli 、 Express 、 Node ）

【讨论】：