Run your angular app on nodejs
We created our application with @angular/cli, it meet your requirements, everything is tested. The next step is put it somewhere in the cloud on a plot form like heroku or similar. Oh no it just stopped working, our routes didn’t worked anymore. What now, we should definitely get some help!!!!!!
First let take a closer look how we configured our server.ts file
Ok we did a routing for all our api calls. That is fine if we try to access the url we get the right result back.
Now we take a look to our angular. We taught it should work, but this is wrong, hmmmm
Why is our route gone
The logic of app.get is to redirect our route to something else but we don’t provide anything for our angular routes according to node.
But it work with ng serve
Yes, cli tools are nice to speeds up your coding capacity. A lot of boilerplate code is generated for you. It is like a big black box where al the magic happens. We can star thinking fine for us, fine for our client, … . But then we are facing against a huge problem like this. Where we need to start searching?
Start with the basics then start using tools
Our routing is working fine with ng serve, because there is a complete webpack configuration behind the scenes. One of the things that is provided is a small auto reloading server that is fully configured to run everything like a webserver. When we run the ng build command this small webserver is no longer available so we need to simulate it.
Tip of the day: Don’t accept all things goes automatically. Don’t be afraid to deep dive into a topic before use automated tools to generate code for you
Back to our routing problem
A solution is to start copy the angular app content, that was generated after the build in a separated folder on our node server f.e. dist.
Then we provide our api routes. Same way, nothing changes
We start redirect all other calls to index.html
We test again on a node server. The root: localhost: 9090, the other route /search/1. Already one part changed, we get both a blank page. Our route is now resolved but still no working application.
If we take a closer look to the errors with Chrome developer tools we get
This sounds quite logic if we take a look to the redirecting logic, everything goes to index.html, everything that means also images, css, js, … files. To attack this problem we add a check. If the file has an extension like this we redirect our code.
Final result
Finally our file looks as follow
Working example
Checkout the branch and run yarn backend, open your browser and go to localhost:9090
As you see it is written in typescript, compiled to javascript and run on node
We all love typescript on our Angular apps, we use the latest es6, even es7 features to write our code. If you want to benefit on these on the backend side it is also option.
You to add some polyfills, in our case we add es-shim and reflect-metadata. You can write object oriented code, easy to maintain and easy to use.
Typescript doesn’t run (yet) on node. For this we can add a small additional step to our package.json: backend: tsc backend/server.ts && node backend/server.js. This transpile first the typescript to javascript and afterwards it run’s the javascript file.
