你如何运行Node / Express的纯前端Angular应用程序?

我创build了一个完全在Angular上运行的MEAN栈应用程序。 我试图把它托pipe到Heroku,但Heroku需要Node来运行应用程序。 所以,当我运行Heroku应用程序时,它将访问该节点端口,并显示在开始时build立的基本索引视图。

我知道如何在Node中显示视图,但是我不清楚如何在Node端口运行时显示Angular应用程序。

可以指定angular度端口作为节点视图渲染的一部分吗? 或者也许redirect节点来显示Angular端口呢?

App.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 ejs = require('ejs'); var index = require('./routes/index'); var users = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', index); app.use('/users', users); // 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 handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {}; // render the error page res.status(err.status || 500); res.render('error'); }); module.exports = app; 

Index.js路由

 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; 

斌/ WWW

 #!/usr/bin/env node /** * Module dependencies. */ var app = require('../app'); var debug = require('debug')('aether-news:server'); var http = require('http'); /** * Get port from environment and store in Express. */ var port = normalizePort(process.env.PORT || '3000'); app.set('port', port); /** * Create HTTP server. */ var server = http.createServer(app); /** * Listen on provided port, on all network interfaces. */ server.listen(port); server.on('error', onError); server.on('listening', onListening); /** * Normalize a port into a number, string, or false. */ function normalizePort(val) { var port = parseInt(val, 10); if (isNaN(port)) { // named pipe return val; } if (port >= 0) { // port number return port; } return false; } /** * Event listener for HTTP server "error" event. */ function onError(error) { if (error.syscall !== 'listen') { throw error; } var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port; // handle specific listen errors with friendly messages switch (error.code) { case 'EACCES': console.error(bind + ' requires elevated privileges'); process.exit(1); break; case 'EADDRINUSE': console.error(bind + ' is already in use'); process.exit(1); break; default: throw error; } } /** * Event listener for HTTP server "listening" event. */ function onListening() { var addr = server.address(); var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port; debug('Listening on ' + bind); } 

您可以使用Github Pages,Netlify,Zeit's Now CLI或许多其他服务,这些服务允许您在没有后端configuration的情况下部署前端应用程序。 你为什么selectHeroku?

我结束了使用webpack捆绑我的应用程序,并包括bundle.js脚本文件在我的服务器索引。 这使我可以通过localhost:3000显示我的Angular应用程序。