Question

Angular2应用程序已经运行良好。我一直在尝试通过添加server.js来实现带有angular2应用程序的MEAN堆栈，但我不确定为什么我找不到index.html网页没有出现浏览器。我的文件夹结构是：

而express.js是：

var express=require('express');
var app=express();
app.use('/src',express.static(__dirname+'/src'));

app.get('/',function(req,res){
    res.sendFile(__dirname+'/src/index.html');
});
app.listen(3000);

路径可以，但在浏览器中，

我甚至尝试使用ng build来获取dist文件夹，并尝试指向dist / index.html，但它也没有工作。请支持。

编辑： index.html -src

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Something</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

</body>
</html>

index.html - dist

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Something</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Answer 1

由于快速脚本错误，您会收到意外的令牌错误。为每个请求服务index.html＆amp;因此error unexpected token <

使用此快递脚本。

// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');

// Get our API routes

const app = express();

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));

// Set our api routes

// Catch all other routes and return the index file
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

/**
 * Get port from environment and store in Express.
 */
const port = process.env.PORT || '3000';
app.set('port', port);

/**
 * Create HTTP server.
 */
const server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port, () => console.log(`API running on localhost:${port}`))

步骤：

执行ng build --base-href .
启动快递或服务器脚本。

基础href。很重要，否则你将获得404 for JS＆amp;资源。

编辑：

Answer 2

这是由于在index文件夹中未指向dist文件夹中创建项目目录。通过将index.html文件中的基本标记从<base href="/">更改为<base href="/project-app/">来解决此问题。

注意：在您的情况下，project-app将是dist目录内的文件夹

Answer 3

我在下面的教程中找到了Angular 2的平均值，以及我如何设置应用程序。

2：https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

您可以在该教程中修改以下代码：

const api = require('./server/routes/api');

const app = express();
mongoose.connect('localhost:27017/node-angular');    

app.use(express.static(path.join(__dirname, 'dist')));
app.use(express.static(path.join(__dirname, 'public')));

// Catch all other routes and return the index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});

我希望它适合你。

Answer 4

您应将 dist 文件夹放入视图文件夹，并在服务器中设置公共路径，如下所示：

const express = require('express');
const hbs = require('hbs');
const path = require('path');
const bodyParser = require('body-parser');

// Get our API routes

const app = express();

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));





app.set('view engine', 'html');
app.engine('html', require('hbs').__express);
app.use(express.static('views/dist'));
app.get('*',(req,res)=>{
    res.render('dist/index.html')
})

app.listen(3000,()=>{
    console.log('port opened');
})

这是我的文件夹树：

Answer 5

您需要添加index.html的标题

<!DOCTYPE html>

检查以下link

未捕获的SyntaxError：意外的令牌＆lt; - 具有angular2-cli的MEAN堆栈

5 个答案: