Angular2路由连接到Express路由？
当通过URL访问我的angular2应用程序的路线不工作…快递正在渲染一个错误页面。
所以我有一个path（ /docs ）为静态内容和其他一些静态资源提供服务，然而， /被路由到一个由angular度2pipe理的index.html。所以通过打开应用程序根目录然后点击各种路由器链接可以到一个路线eg /tutorial/chapter/1 。 但是，因为这不是我的快速应用程序中的注册路线，如果我刷新页面，我会得到一个404。
我希望能够在浏览器中inputhttp://localhost:3000/tutorial/chapter/1并获取该页面。 如何设置快递路线的所有未定义的路线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;
你可以在这里看到完整的回购
这里是路由中间件def：
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;
app.js
由于订单是重要的，新的代码插入到多个位置，整个文件都包含在内。 寻找评论开始与/ / // JS -
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var serveStatic = require('serve-static') var file = require('./features/prepareTutorial'); var routes = require('./ng2/routes/index'); 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')); app.use('/persist', express.static(__dirname + '/persist')); // JS - Add /app app.use('/app', express.static(__dirname + '/ng2/views/app')); // I have to comment this line because it failed //file.processTutorial(); //generate html rendered patches for tutorial steps //file.genGit(); //generate git SHA file.processChapters(); // 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(subdomain('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')); app.use('/diff', serveStatic('features/tutorial/diffs')); 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')); app.use('/', routes); // JS - /tutorial static //app.use('/tutorial', express.static('ng2/views/app/tutorial')); // JS - /tutorial/chapter/* send index file app.all(/^\/tutorial$/, (req, res) => { res.redirect('/tutorial/'); }); app.use('/tutorial/', (req, res) => { res.sendFile(__dirname + '/ng2/views/index.html'); }); // catch 404 and forward to error handler app.use(function (req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function (err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function (err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app;
ng2 / config / systemjs.config.js＆ng2 / public / config / systemjs.config.js
使用绝对path
这是主要问题。 使用相对path，浏览器正在请求tutorial/chapter/2/app/* ， tutorial/chapter/2/node_modules/*等文件，并且应用程序完全中断。
// snip ... var map = { 'app': '/app', // 'dist', '@angular': '/node_modules/@angular', 'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api', 'rxjs': '/node_modules/rxjs' }; // snip ...
NG2 /视图/ index.html中
使用绝对path
这不会阻止加载页面，但一塌糊涂。
// snip ... <link rel="stylesheet" href="/stylesheets/style.css"> // snip ...
Angular 2假定独立于请求的URL，前端将被返回。 这个假设是基于现代浏览器实现的一种称为push state 。 如果你想支持除浏览器的最前沿之外的任何东西，你有3个选项：
-
build议：从客户端分离API服务器。
如果你把你的客户端放在example.org并把你的后端放在api.example.org你可以做Angular假定的事实。 您也可以独立部署，客户端可以位于静态主机或CDN上。 这将需要你设置CORS。 -
抓住所有快速路线
确保Express中的所有路由与您在NG2中设置的路由不同，并制作全部处理程序。 把这样的东西放在路由/中间件的末尾，但在404处理程序之前！app.use(function(req, res, next) { res.sendFile("index.html"); }) -
使用传统的浏览器URL样式的路由器。
你可以让NG2路由器使用散列路由。 在这里检查。
而不是app.use('/', routes); ，注册一个始终服务于index.html的中间件。 但要小心，这可能会导致您的应用程序甚至在/docspath中返回index.html 。
只需使用呈现索引页的中间件：
app.use(routes);
确保routes中间件本身总是呈现页面，而不仅仅是/path。
var express = require('express'); /* render home page. */ var router = function(req, res, next) { res.render('index', { title: 'Express' }); }; module.exports = router;
删除这个404处理程序（它应该是自动的）
// catch 404 and forward to error handler app.use(function (req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); });
并将node_modules路由更改为以下内容（因为SystemJS在parsing期间依赖于404响应）：
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);