-2

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:
enter image description here

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, enter image description here.

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>
Gayathri
  • 1,776
  • 5
  • 23
  • 50

5 Answers5

3

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 :

  1. do ng build --base-href .
  2. start express or server script.

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

Edit : enter image description here

Parth Ghiya
  • 6,929
  • 2
  • 30
  • 37
  • I tried it, i get unexpected token < for all js references in dist/index.html – Gayathri Jul 30 '17 at 04:20
  • you used this express script ??? cause i just now checked & it worked perfectly fine for me .! – Parth Ghiya Jul 30 '17 at 04:21
  • strange.. can u ensure 1. server.js is parallel to the dist folder. 2. the express script is same as the answer i posted. 3. open index.html & Copy the JS paths .. i.e something like `script src=` – Parth Ghiya Jul 30 '17 at 04:27
  • i have added index.html of src and dist. Doing ng build --base-href . didn't work as well.! – Gayathri Jul 30 '17 at 04:34
  • my situation is now same as stated in https://stackoverflow.com/questions/42819588/unexpected-token-in-angular2-cli. i ain't sure what is that web.config – Gayathri Jul 30 '17 at 04:39
  • web.config is of .net and is unrelated to node js ! seeing your dist/index.html it doesn't contain `base href .` , thats why you are getting the issue still. see my screenshot.! try changing base href manually or run `ng build --base-href .` command properly – Parth Ghiya Jul 30 '17 at 04:47
2

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

Vishnu Raghavan
  • 53
  • 5
1

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.

harold_mean2
  • 238
  • 1
  • 14
0

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:

enter image description here

Masood Moghini
  • 374
  • 3
  • 13
0

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

<!DOCTYPE html>

check the following link

CESAR NICOLINI RIVERO
  • 123
  • 3
  • 11