Not able to render static html of Angular build from node

Question

I wanted to render the static files of Angular from my node server.

As an experiment, Below are the steps i took:

Created a dist folder by building my Angular project using

ng build --prod

Copied the dist folder to the root directory of my node server

Configured express app in my node server to point to index.html of dist folder. Below are the snips of configuration code i wrote -

app.use(express.static(path.join(__dirname, '../front-end/dist/')))

app.get('*', (req, res) => {
 return res.sendFile(path.join(__dirname, '../front-end/dist/my-first-app/index.html'))
})

When i run my node server locally on port 3000 If i am correct, it should get redirected to index.html page within the compiled angular dist folder. Well, i see the redirection attempt being made by node. However, after redirection the browser is failing to load the html within the index.html file. It throws the below error on the console-

Uncaught SyntaxError: Unexpected token <

The above error tells clearly that the browser failed to load the html page. I believe my understanding is correct. But i am not able to figure out why this error gets logged. I hope i get some answers here.

I am trying to work without Angular CLI's ng serve command. If i succeed, i will try to attempt this on cloud. My intension is i want to make use of only static files generated out of Angular build rather than loading them using ng serve and also to render these files on browser from a call using node. Since back-end server has to be the only running server and frontend should not be a server but rather simple static files which needs to be served with data from the former. I hope i made sense.

@GCSDC I missed that question. It was very useful and i got my solution though. Thank you very much. The issue with my code was, i missed a sub directory of my build directory path. I modified my code like this and it worked - app.use(express.static(path.join(__dirname, '../front-end/dist/my-first-app'))) So basically, i had missed to specify my-first-app which had all the build files — rohit
– rohit, Commented Mar 17, 2019 at 16:55

Felix Lemke · Accepted Answer · 2019-03-17 12:36:56Z

0

Try to serve the static files directly with a path, e.g. / and run the app on a port

app.use('/', express.static('pathToAngular/'));
app.listen(3000);

Then your static files, also the angular created javascript files will be served under the local adress

http://localhost:3000/

To let the angular generated javascript/html files know about their location (deploy url), make sure you add the deployUrl key in your angular.json file

"configurations": {
  "production": {
    "optimization": true,
    [...]
    "deployUrl": "http://localhost:3000/",
    "baseHref": "./"
  }
}

Don't forget the slash at the end and also add the baseHref entry. In general you'll want to create another configuration with the nodejs local deploy url and add the production server url in the production configuration.

answered Mar 17, 2019 at 12:36

Felix Lemke

6,4863 gold badges46 silver badges69 bronze badges

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

1 Comment

rohit Over a year ago

Thank you. I will try your solution. Also could you please share a simple demo of what you explained above?

Collectives™ on Stack Overflow

Not able to render static html of Angular build from node

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related