# Angular Deployment

**URL:** <https://forum.codewithmosh.com/t/angular-deployment/2257>\
**Category:** Angular\
**Created:** [January 25, 2021, 4:39pm UTC](https://forum.codewithmosh.com/t/angular-deployment/2257 "2021-01-25T16:39:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![westley](https://avatars.discourse-cdn.com/v4/letter/w/9de0a6/32.png) [@westley](https://forum.codewithmosh.com/u/westley)\
**Post date:** [January 25, 2021, 4:39pm UTC](https://forum.codewithmosh.com/t/angular-deployment/2257/1 "2021-01-25T16:39:40Z")

</div>

I tried to deploy the angular app “followers” to Heroku, when done, the page shows nothing. The log shows error:  
Uncaught SyntaxError: Unexpected token ‘\<’  
polyfills.bf99d438b005d57b2b31.js:1 Uncaught SyntaxError: Unexpected token ‘\<’  
main.b2ea645c9a6cb4b610ed.js:1

Tried to find what went wrong, haven’t got any idea yet.

 ![error](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/1X/0458029def3e960a4a4bbaf36862151b11a53ad1.jpeg)

---

<div class="post-metadata">

**Author:** ![westley](https://avatars.discourse-cdn.com/v4/letter/w/9de0a6/32.png) [@westley](https://forum.codewithmosh.com/u/westley)\
**Post date:** [January 25, 2021, 4:40pm UTC](https://forum.codewithmosh.com/t/angular-deployment/2257/2 "2021-01-25T16:40:57Z")

</div>

And also why do we need to use a server.js in the Angular app for deployment to Heroku? I remember we don’t have this in the React courses.

---

<div class="post-metadata">

**Author:** ![westley](https://avatars.discourse-cdn.com/v4/letter/w/9de0a6/32.png) [@westley](https://forum.codewithmosh.com/u/westley)\
**Post date:** [January 25, 2021, 5:39pm UTC](https://forum.codewithmosh.com/t/angular-deployment/2257/3 "2021-01-25T17:39:54Z")

</div>

Just figured it out, it is caused by different of the build output. just changed your server.js to below:

const express = require(“express”);

const app = express();

const path = require(“path”);

app.use(express.static(path.join(\_\_dirname, “dist/hello-world”)));

console.log("@@", path.join(\_\_dirname, “dist/hello-world/index.html”));

// app.all("/\*", (\_, res) =\>

// res.status(200).sendFile(path.join(\_\_dirname, “dist/hello-world/index.html”))

// );

app.listen(process.env.PORT || 8080, () =\>

console.log(

```
`Server is running on http://localhost:${process.env.PORT || 8080} ...`

```

)

);

---

<div class="post-metadata">

**Author:** ![westley](https://avatars.discourse-cdn.com/v4/letter/w/9de0a6/32.png) [@westley](https://forum.codewithmosh.com/u/westley)\
**Post date:** [January 25, 2021, 5:51pm UTC](https://forum.codewithmosh.com/t/angular-deployment/2257/4 "2021-01-25T17:51:25Z")

</div>

howevver, 404 is not working

---

<div class="post-metadata">

**Author:** ![westley](https://avatars.discourse-cdn.com/v4/letter/w/9de0a6/32.png) [@westley](https://forum.codewithmosh.com/u/westley)\
**Post date:** [January 25, 2021, 5:53pm UTC](https://forum.codewithmosh.com/t/angular-deployment/2257/5 "2021-01-25T17:53:23Z")

</div>

const express = require(“express”);

const app = express();

const path = require(“path”);

app.use(express.static(path.join(\_\_dirname, “dist/hello-world”)));

app.all("/\*", (\_, res) =\>

res.status(200).sendFile(path.join(\_\_dirname, “dist/hello-world/index.html”))

);

app.listen(process.env.PORT || 8080, () =\>

console.log(

```
`Server is running on http://localhost:${process.env.PORT || 8080} ...`

```

)

);

---

<div class="post-metadata">

**Author:** ![westley](https://avatars.discourse-cdn.com/v4/letter/w/9de0a6/32.png) [@westley](https://forum.codewithmosh.com/u/westley)\
**Post date:** [January 25, 2021, 5:56pm UTC](https://forum.codewithmosh.com/t/angular-deployment/2257/6 "2021-01-25T17:56:58Z")

</div>

works now.

just need to change to app.use(express.static(path.join(\_\_dirname, “dist/hello-world”)));