Javascript Angular2路线是否与快速路线相结合？

通过URL访问时，我的angular2应用程序的路由不起作用。。。Express正在呈现错误页

所以我有一个路由（

/docs

），它提供一些静态内容和一些其他静态资源，但是，

/

被路由到由angular 2管理的index.html。因此，通过打开应用程序根目录，然后单击各种路由器链接，我可以找到一条路由，例如

/tutorial/chapter/1

。然而，由于这不是我的express应用程序中的注册路线，如果我刷新页面，我会得到404

我希望能够键入

http://localhost:3000/tutorial/chapter/1

进入我的浏览器并获取该页面。如何将express设置为将所有未定义的路由路由路由到angular，并让angular处理404

这是我的app.js：

var app = express();

// html view engine setup
app.set('views', path.join(__dirname, '/ng2/views'));
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

app.use(express.static('ng2/views'));
app.use(express.static('ng2/public'));

app.use('/node_modules', express.static(__dirname + '/node_modules'));    

// uncomment after placing your favicon in /public
app.use(favicon(path.join(__dirname, 'ng2/public', 'favicon.png')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

//all static assetes for hexo content

app.use('/docs', serveStatic('features/docs/public', { 'index': ['index.html', 'index.htm'] }));

app.use('/', routes);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});


module.exports = app;

你可以看到完整的回购协议

以下是路由中间件定义：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});


module.exports = router;

使用（'/'，routes）代替

app

，注册一个始终为

index.html

提供服务的中间件。不过要小心，这可能会导致应用程序返回

index.html

，即使在

/docs

路径中也是如此

只需使用呈现索引页的中间件：

app.use(routes);

确保

路由

中间件本身始终呈现页面，而不仅仅是在

/

路径上

var express = require('express');

/* render home page. */
var router = function(req, res, next) {
  res.render('index', { title: 'Express' });
};

module.exports = router;

从404处理程序中删除此项（它应该是自动的）

并将节点_模块路由更改为以下（因为SystemJS在解析过程中依赖404响应）：

---

Angular 2假设独立于请求URL，前端将被返回。这一假设基于现代浏览器实现的一个称为推送状态的功能。如果您不想支持浏览器的前沿功能，您有3个选项：

• 建议：将API服务器与客户端分离。
  如果你把你的客户端放在

  example.org

  上，把你的express后端放在

  api.example.org

  上，你就可以做Angular认为正确的事情。您还可以独立部署，客户端可以驻留在静态主机或CDN上。但这需要您设置CORS

• 通车特快路线
  确保Express中的所有路线与NG2中设置的路线不同，并制作一个全面处理程序。在路由/中间件的末尾，但在404处理程序之前，放置类似的内容

  app.use(function(req, res, next) {
    res.sendFile("index.html");
  })
  

• 为路由器使用传统浏览器url样式。
  您可以使NG2路由器对路由使用哈希。检查

---

app.js
由于顺序很重要，并且新代码插入到多个位置，所以包含了整个文件。查找以

//JS-

var express=require（'express'）；
var path=require（'path'）；
var favicon=要求（'serve-favicon'）；
var记录器=需要（'morgan'）；
var cookieParser=require（'cookie-parser'）；
var bodyParser=require（'body-parser'）；
var serveStatic=require（'serve-static'）
var file=require（'./features/prepareTutorial'）；
变量路由=需要（'./ng2/路由/索引'）；
var-app=express（）；
//html视图引擎设置
app.set（'views'，path.join（'udirname'，/ng2/views'）；
app.engine（'html'，require（'jade'）.renderFile）；
app.set（'view engine'，'html'）；
应用程序使用（快速静态（'ng2/视图'）；
应用程序使用（快速静态（'ng2/public'）；
app.use（'/node_modules'，express.static（'/node_modules+'）；
app.use（'/persist'，express.static（uu dirname+'/persist'）；
//JS-Add/app
app.use（'/app'，express.static（'/ng2/views/app'）；
//我不得不评论这行，因为它失败了
//processTutorial（）文件//为教程步骤生成html渲染的修补程序
//genGit（）文件//生成gitsha
processChapters（）文件；
//将您的favicon置于/公共位置后取消注释
app.use（favicon（path.join（uu dirname，'ng2/public'，'favicon.png'））；
应用程序使用（记录器（“开发”）；
use（bodyParser.json（））；
use（bodyParser.urlencoded（{extended:false}））；
使用（cookieParser（））；
//含六氧化二氢的所有静态资产
app.use（'/docs'，serveStatic（'features/docs/public'，{'index'：['index.html'，'index.htm']}））；
//应用程序使用（子域（'docs'，express.static（'docs/public'））；
app.use（'/script'，serveStatic（'features/docs/public/script'）；
app.use（'/style'，serveStatic（'features/docs/public/style'）；
app.use（'/images'，serveStatic（'features/docs/public/images'）；
应用程序使用（'/diff'，serveStatic（'features/tutorial/diff'）；
app.use（'/git'，serveStatic（'features/git'）；
app.use（'/chapter'，serveStatic（'ng2/views/app/tutorial/chapter/chapters'）；
app.use（'/img'，serveStatic（'features/docs/source/img'）；
app.use（'/config'，serveStatic（'ng2/config'）；
应用程序使用（“/”，路线）；
//JS-/tutorial static
//app.use（'/tutorial'，express.static（'ng2/views/app/tutorial'）；
//JS-/tutorial/chapter/*发送索引文件
应用程序所有（/^\/教程$/，（请求，回复）=>{
res.redirect（'/tutorial/'）；
});
应用程序使用（“/tutorial/”，（请求、回复）=>{
res.sendFile（uu dirname+'/ng2/views/index.html'）；
});
//捕获404并转发到错误处理程序
应用程序使用（功能（请求、恢复、下一步）{
var err=新错误（“未找到”）；
err.status=404；
下一个（错误）；
});
//错误处理程序
//开发错误处理程序
//将打印stacktrace
if（app.get（'env'）='development'）{
应用程序使用（功能（错误、请求、恢复、下一步）{
资源状态（资源状态| | 500）；
res.render（'错误'{
message:err.message，
错误：错误
});
});
}
//生产错误处理程序
//没有堆栈跟踪泄漏给用户
应用程序使用（功能（错误、请求、恢复、下一步）{
资源状态（资源状态| | 500）；
res.render（'错误'{
message:err.message，
错误：{}
});
});
module.exports=app；

ng2/config/systemjs.config.js&ng2/public/config/systemjs.config.js
使用绝对路径
这是主要问题。通过相对路径，浏览器正在请求

tutorial/chapter/2/app/*

、

tutorial/chapter/2/node\u modules/*

等处的文件，以及

var modules = express.Router();

modules.use(express.static(__dirname + '/node_modules'));
modules.use(function(req, res, next) {
    // Missing files inside node_modules must return 404
    // for the module loader to work
    res.sendStatus(404);
});


app.use('/node_modules', modules);  

app.use(function(req, res, next) {
  res.sendFile("index.html");
})

// snip ...
<link rel="stylesheet" href="/stylesheets/style.css">
// snip ...