Uncaught SyntaxError: Unexpected token < - MEAN stack with angular2-cli答案

【问题标题】：Uncaught SyntaxError: Unexpected token < - MEAN stack with angular2-cliUncaught SyntaxError: Unexpected token < - MEAN stack with angular2-cli
【发布时间】：2018-01-05 20:10:39
【问题描述】：

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 - 分布

<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>

【问题讨论】：

浏览器控制台中的任何错误？
在 ngbuild 并指向 dist 文件夹的 index.html 之后，我得到 localhost/:14 GET localhost:3000/inline.bundle.js localhost/:14 GET localhost:3000/polyfills.bundle.js localhost/:14 GET localhost:3000/styles.bundle.js localhost/:14 GET localhost:3000/vendor.bundle.js localhost/:14 GET localhost:3000/main.bundle.js 404（未找到）
这样做ng build --base-href . 然后尝试
当我将更改为
我在这里
，我可以在浏览器中查看“我在这里”。因此，问题在于加载组件。太腥了！
是的，JS没有加载你得到404，这就是为什么我说做这个命令ng build--base-href .

标签： javascript angular mean-stack mean.io

【解决方案1】：

我在下面找到了使用 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'));
});

我希望它对你有用。

【讨论】：

当我将更改为
我在这里
，我可以在浏览器中查看“我在这里”。所以，问题在于加载组件。
我只是想帮助你，这就是我在 index.html
如果您按照教程（我提供的链接）进行操作，您的应用程序应该可以运行。祝你有美好的一天。
我得到 Uncaught SyntaxError: Unexpected token
我从一开始就有它作为参考。

【解决方案2】：

您收到意外的令牌错误，因为 express 脚本错误。对于每个请求，它都在为 index.html 提供服务，因此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 .
启动 express 或服务器脚本。

基础href。很重要，否则您将获得 JS 和资源的 404。

编辑：

【讨论】：

我试过了，我得到了意想不到的令牌
你使用了这个快速脚本？？？因为我刚刚检查过，对我来说效果很好。！
奇怪.. 你能确保 1. server.js 与 dist 文件夹平行。 2.快递脚本与我发布的答案相同。 3. 打开 index.html 并复制 JS 路径 .. 例如 script src=
我已经添加了 src 和 dist 的 index.html。做 ng build --base-href 。效果也不好。！
我现在的情况和stackoverflow.com/questions/42819588/…中的一样。我不确定那个 web.config 是什么

【解决方案3】：

您应该将您的 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');
})

这是我的文件夹树：

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您需要在index.html 的标题中添加

<!DOCTYPE html>

检查以下link

【讨论】：