Errors in the code after build using angular cli (ng build)

Question

I am new angular, trying to set up new project in angular, using angular/cli. I did following steps to setup a express server and angular as the front end.

installed angular/cli; then ng new testApp; ng build; this created a dist folder like dist>testApp>and all the files(index,html, main.js. . . . so on),

and i have installed express and body-parser. now in my server.js i have following code.

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app = express();


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : false}));


app.use(express.static(path.join(__dirname, 'dist')));

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

const port = process.env.port || '3000';
app.set('port', port);

const server = http.createServer(app);

server.listen(port, () => console.log(`listening on port : ${port}`));

Now when i started the server and tried "http://localhost:3000/" on my browser I see errors in console saying unexpected token in all .js files like main.js, polyfills.js so when i look at the sources tab i can see even the js files are having the same index.html content in them.

So can any tell me what i was missing or doing the wrong way. please. Thanks.

In your server.js all get requests are pointing to index.html, thats why you are getting all files with index.html contents. See my answer below. — Gopakumar Gopalan
– Gopakumar Gopalan, Commented Jun 21, 2018 at 10:00

Gopakumar Gopalan · Accepted Answer · 2018-06-21 09:58:28Z

0

Just rewrite your server.js file as below.

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app = express();


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : false}));


app.use('/', express.static(path.join(__dirname, 'dist', 'testApp')));


const port = process.env.port || '3000';
app.set('port', port);

const server = http.createServer(app);

server.listen(port, () => console.log(`listening on port : ${port}`));

This may solve your issue.

answered Jun 21, 2018 at 9:58

Gopakumar Gopalan

1,19714 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manoj Over a year ago

thanks for the reply. it solved my issue. but when i use app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'testApp')); }); it gives me "can not Get" , so shouldn't i be using res.send file or is it some thing else that i am doing?

Gopakumar Gopalan Over a year ago

You need not use app.get for showing the angular site. app.get or app.post can be used for API calls which your angular site needs.

Collectives™ on Stack Overflow

Errors in the code after build using angular cli (ng build)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related