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

Question

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

4.9k views Asked by Gayathri At 30 July 2017 at 02:31

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. My folder structure is:

And express.js is:

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.

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

Original Q&A

There are 5 answers

**harold_mean2** · Answer 1 · 2017-07-30T03:27:07+00:00

I find the tutorial below in setting up mean with Angular 2 and it's how I set up my app.

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.

**Parth Ghiya** · Answer 2 · 2017-07-30T04:16:38+00:00

you get unexpected token error because the express script is wrong. for each request it is serving index.html & Hence the 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 .
start express or server script.

base href . is important otherwise you will get 404 for JS & Resources.

Edit :

**Masood Moghini** · Answer 3 · 2017-11-21T18:24:16+00:00

you should put your dist folder into a views folder and set your public path in server like bellow:

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:

**Vishnu Raghavan** · Answer 4 · 2018-07-28T20:04:21+00:00

This is due to the creation of project directory inside the dist folder which is not being pointed by your index.html file. Fixed it by changing the base tag from <base href="/"> to <base href="/project-app/"> inside index.html file.

note: in your case project-app would be the folder inside the dist directory

**CESAR NICOLINI RIVERO** · Answer 5 · 2020-08-08T19:19:32+00:00

CESAR NICOLINI RIVERO On 08 August 2020 at 19:19

you need to add in the header of your index.html

<!DOCTYPE html>

check the following link

TechQA.

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

There are 5 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULAR

Related Questions in MEAN-STACK

Related Questions in MEAN.IO

Popular Questions

Popular Tags

Trending Questions