Angular-cli: ng serve works, but ng build doesn't work on node v8

[happierday]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

angular cli: 1.5.0
node: 8.9.0
npm: 5.5.1
windows 10
chrome newest version

Repro steps.

npm init to create a new project
create index.js
npm install --save express

const express = require('express');
const path = require('path');
const app = express();

app.get('*',(req,res)=>{
    res.sendFile(path.join(__dirname + '/client/dist/index.html'));
})

app.listen(8000,() => {
    console.log('listening to ' + 8000);
});

ng new client to generate a new angular app
then ng build at client directory

At this point go back to root and run nodemon
navigate to localhost:8000,
console shows error:

Uncaught SyntaxError: Unexpected token <                inline.bundle.js:1 
Uncaught SyntaxError: Unexpected token <                polyfills.bundle.js:1 
Uncaught SyntaxError: Unexpected token <                styles.bundle.js:1 
Uncaught SyntaxError: Unexpected token <                vendor.bundle.js:1 
Uncaught SyntaxError: Unexpected token <                main.bundle.js:1 

Desired functionality.

It should send the index.html correctly and show the default angular welcome page.

Mention any other details that might be useful.

I used node v6 before and my app successfully hosted on heroku. When I download node v8 today, it starts all the problems with my app. So I decided to make a new simple app with npm init and ng new. I don't add anything complexity to it. I did above step twices, they output the same error.

[GoNode5]

// app.get('*',(req,res)=>{
// res.sendFile(path.join(__dirname + '/dist/index.html'));
// })
app.use('/', express.static(__dirname + '/dist'));

[happierday]

it doesn't work. you are not supposes to comment out app.get function. I found out that I need to include express static before app.get happens. Thanks for the heads up.

[ceaguilera]

Hi, how did you solve it?

[happierday]

You just need to add express-static module and use this middleware. then send the index.html file

[davidshanline]

I am having similar issues while using express.static.

// 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
app.use('/api', api);

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

Any suggestions?

[davidshanline]

So I was able to fix my issue by updating the base href attribute inside the head tags of index.html.
I didn't realize that when i did an ng build that it was creating a subdirectory with the project name inside of the dist directory. Because of this I had to update the base hrefattribute from <base href="/"> to <base href="/project-name/"> in order to point to that folder instead of the root folder.

[karosi12]

After ng build check your dist folder if the directory is dist/projectname
modify server.js or app.js to use the below code.

app.use(express.static(path.join(__dirname, '/dist/projectname/')));
app.listen(port);
app.get("*", function(req, res) {
res.sendFile(path.join(__dirname + "/dist/projectname/"));
});

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}