I wanted to learn something new. I know nothing about JavaScript, TypeScript or any of web framework. When I found time, I started taking a look at Angular. I don’t know I’d ever use it but it’s all the industry rage. (Friend of mine mentioned React is better, but I know nothing so I’ll see.)
I was happily following the tutorial, and when it came to the part of using fake RESTful in-memory database angular-in-memory-web-api, I hit a wall. The piece just doesn’t want to work at all. I know very little of anything at this point about npm or node or JavaScript. But, I understood that it’s mimicing the database. So, “fine. I’ll use real database instead.”.
So, I started a project, thanks to evaluation of IntelliJ, and googling like storm to find out how to write the RESTful service using PostgreSQL.
I found this post to be pretty much what I need. Just swap out the puppies with heroes. (Yes, the post uses puppy database.) But, I also wanted to use the express/router.
The part accessing database and returning records started working pretty quickly. I spent most of the day Googling and learning JavaScript, Observables, Express router, and then write a few lines of code to access database.
The pain started once I swapped out the web service URL from the fake URL of Angular Tutorial to my own. As a complete newbie, I didn’t know how to debug but it just doesn’t work at all. After a few more Google, someone said, “console output shows up on Chrome.”. I was hoping IntelliJ’s “debug” to work but I couldn’t manage it to work. (Another time to learn this.) So, I opened the tutorial’s endpoint, I can see the console log and errors! Horay!.
And the error says No Access-Control-Allow-Origin present in the header. What on earth? Yet another googling. (I don’t know how people write code before google.)
Now, I learned when you make a call from other domain (well, in this case port 4200 to port 3001.), it’s crossing boundaries and web services don’t like that kind of deal for security reason. The way to do this is to add the header. Rather than doing it by myself, I found a library “cors”. I confess that I googled. I have no clue what it does. Also, the location of app.use(cors()) seems to matter. When I moved it around, it got totally wedged. So, be careful using this piece.
app.use(cors());
app.options('*', cors()); // enable pre-flight
Second missing piece was, the Angular’s example’s accessing service didn’t like the header that node’s service returns. Googling, googling and more googling. And here was the answer. 42! No. JK.
app.disable('etag')
Apparently, this “etag” thing needs to be suppressed. I’m not quite sure of what it is (I’ll learn some day), but disabling this bit made the Angular tutorial happy.
https://github.com/ntai/realherodb
Here is the result of it. I faked the fake database with real database. Named it “Real Hero DB”