At Engel & Völkers Technology, we have the opportunity to work on aside projects and dedicate some of our working hours to learn new things. Few months ago, I had the chance to work on a web app for another team (or to be honest, I was the only frontend developer available at that time to do the job :p ) on a basis of one day per week.
a basic CRUD app which consumes two restful endpoints. It offers the following functionalities:
- listing, creating, editing and deleting business units
- listing, creating, editing, deleting divisions and linking a division to a business unit.
As I have been working with AngularJS for almost 3 years, I chose the new Angular framework Angular2(v4/v5) to develop the app. I wanted to discover what made Angular team rewrite the framework from scratch and there is no better way to learn than to do it.
In this article, I will try to summarize this short experience with Angular framework and give details about building a CI/CD pipeline to deploy an angular app to GCP.
Ups and downs:
I think the Angular command line tool is one of the improvements that I really liked, it helps focusing on writing code rather than configuring, getting your app up and running in a short time and building it for production environments. What I liked also is that Angular is still a complete framework with routing, dependency injection, http client, form validation (especially reactive form validation)… and now offers on top of that modularity.
I started the project using version 4 and meanwhile version 5 was released, so I upgraded my app and obviously it was broken: Http Client was deprecated, needed to upgrade Typescript and RxJS versions... but thankfully, the Angular team offers this update guide to help upgrading your Angular app: https://angular-update-guide.firebaseapp.com/
The same happened when I upgraded Angular Material from the beta version to the first stable version: They replaced all “md” prefixes with “mat” prefixes for their components, so none of my components worked anymore.
One last pain point was when googling for information about Angular, either I end up with AngularJS related content or I’m confused about which version(v2, v4 or v5) is the author talking about.
*one hint would be to filter Google results per date so you limit AngularJS related results (thanks to Angular meetup Hamburg)
That was the most important learned lessons during this short journey, now let’s move to how we can deploy this Angular app to Google Cloud Platform
First, I added these commands to my package.json, which will help executing some tasks in the pipeline: