未捕获的语法错误：意外的令牌 < - 带有 angular2-cli 的 MEAN 堆栈
[英]Uncaught SyntaxError: Unexpected token < - MEAN stack with angular2-cli
问题描述
Angular2 application is working well already.I have been trying to implement MEAN stack with that angular2 application by adding server.js but I ain't sure why i don't find index.html webpage not appearing in browser. 
Angular2 应用程序已经运行良好。我一直在尝试通过添加 server.js 来使用该 angular2 应用程序实现 MEAN 堆栈，但我不确定为什么我找不到 index.html 网页未出现在浏览器中。 My folder structure is:我的文件夹结构是：
And express.js is:而 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);
The path is all right but in browser,路径没问题，但在浏览器中， .
.
I even tried with ng build to obtain dist folder and tried pointing to dist/index.html but it didn't work as well.Please favour.我什至尝试使用 ng build 来获取 dist 文件夹并尝试指向 dist/index.html 但它也没有用。请帮个忙。
Edit: index.html -src编辑：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 index.html - 分布
<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>
5 个解决方案
解决方案1
3 2017-07-30 04:16:38
you get unexpected token error because the express script is wrong.你得到意外的令牌错误，因为 express 脚本是错误的。 for each request it is serving index.html & Hence the error unexpected token <对于它服务于 index.html 的每个请求，因此出现error unexpected token <
Use this express script.使用此快速脚本。
// 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}`))
Steps:脚步：
- do
ng build --base-href.做ng build --base-href. - start express or server script.启动 express 或服务器脚本。
base href.基地参考。 is important otherwise you will get 404 for JS & Resources.很重要，否则您将获得 404 的 JS 和资源。
Edit:编辑：
解决方案2
2 2018-07-28 20:04:21
This is due to the creation of project directory inside the dist folder which is not being pointed by your index.html file.这是由于在 dist 文件夹中创建的项目目录没有被 index.html 文件指向。 Fixed it by changing the base tag from <base href="/"> to <base href="/project-app/"> inside index.html file.通过将 index.html 文件中的基本标记从<base href="/">更改为<base href="/project-app/"> > 来修复它。
note: in your case project-app would be the folder inside the dist directory注意：在您的情况下，project-app 将是 dist 目录中的文件夹
解决方案3
1 2017-07-30 03:27:07
I find the tutorial below in setting up mean with Angular 2 and it's how I set up my app.我在下面找到了使用 Angular 2 设置均值的教程，这就是我设置应用程序的方式。
2: https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli 2: https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
You may to modify the following code in that tutorial:您可以修改该教程中的以下代码：
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'));
});
I hope it works out for you.我希望它适合你。
解决方案4
0 2017-11-21 18:24:16
you should put your dist folder into a views folder and set your public path in server like bellow:您应该将dist文件夹放入views文件夹中，并在服务器中设置您的公共路径，如下所示：
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');
})
here's my folder tree:这是我的文件夹树：
解决方案5
0 2020-08-08 19:19:32
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.