Question

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

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

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

Answer 1

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

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);
});

Answer 2

您需要使用HashLocationStrategy

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

在你的bootstrap文件中。

如果你想使用PathLocationStrategy（没有＃），你必须为你的服务器设置重写策略。

Answer 3

我一直在挖这个话题很长一段时间，并尝试了很多方法。工作。如果您使用的是angular-cli和express，我会找到一个解决方案，如果所选答案对您不起作用。

尝试此节点模块：express-history-api-fallback

[Angular]在@NgModule＆gt;下更改你的app.module.ts文件。进口如下：

RouterModule.forRoot(routes), ...

这就是所谓的：＆＃34;位置策略＆＃34;

你可能正在使用＆＃34;哈希定位策略＆＃34;像这样：

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

[Express＆amp;节点] 基本上你必须正确处理URL，所以如果你想要调用＆＃34; api / datas＆＃34;等与HTML5定位策略不冲突的等等。

在您的server.js文件中（如果您使用快速生成器，为了清楚起见，我将其重命名为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（＆＃39; /＆＃39;，index）下调用该模块;

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

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

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

如何处理Nodejs中的angular2路径路径？

3 个答案: