by Mark Grichanik
How we updated from Angular 4 to Angular 5 using swagger code generator
As a full stack developer in an enterprise company, I had the opportunity to update our client side to Angular 5. The process itself is not simple and there are many things to take into account. In this article, I’ve outlined the necessary steps needed to update your Angular version with ease and simplicity.
According to the Angular team, it is ill-advised to update from version 4 to 6 directly. That is why this article will focus on updating to version 5.
Just as a heads up, the Angular team promises that updating from Angular 6 and further will be lighter and easier to handle.
Prerequisites
Make sure you are using the latest swagger version. Angular 5 deprecates OpaqueToken and it now uses InjectionToken instead.
OpaqueToken is a unique and immutable value which allows developers to avoid collisions of DI token id’s. InjectionToken<T> is a parametrized and type-safe version of ‘OpaqueToken’.
We use swagger-codegen-maven-plugin, version 2.2.2. Because of the aforementioned issue, we had to upgrade to 2.3.1.
Inside maven pom.xml file we had to change language attribute of swagger yml from ‘typescript-angular2’ to ‘typescript-angular’ which should support all angular versions from now on.
With Swagger 2.2.2 the BASE_PATH is generated as:
As opposed to Swagger 2.3.1, which is supported by Angular 5:
Take note that there is another major difference between the Swagger versions in regard to the generated file. For example, if we had a dogResource.java file that contains all kinds of REST calls, Swagger 2.2.2 will generate dogApi.ts. Whereas Swagger 2.3.1, will generate it as a service. Meaning, dog.service.ts.
After upgrading to the latest swagger version, you must refactor your imports to use dog.service.ts instead of dogApi.ts.
Let’s Begin
Our server side is written in Java while our client side is written using Angular 4. We are using swagger that creates a yaml file that uses OpenApi specification.
It’s a standard interface to RESTful APIs which allows understanding of the capabilities of the service without access to source code. (https://swagger.io/specification/).
Next, we generate Typescript files (containing objects and APIs) from the original yaml file. You can play with their generator here.
STEP 1: Update your node and npm to the latest versions . We used npm 6.1 with node 10.0. You can download them from here.
STEP 2: Update your package.json file using:
Upgrading NgRx And Needed Refactoring
It is not mandatory to use NgRx, but I highly suggest it. If you are not using NgRx, you can skip to the next step.
The NgRx team created a very useful migration guide. They really describe step by step what modifications are needed to be done in order to have a successful migration
In version 5, the ‘payload’ property in Action Interface has been removed because it was a source of type-safety issues.
The NgRx team suggests to create a new class for each action that you have, and pass the payload as an input to the constructor of that class.
We’ve decided to make the transition easier by creating our own Action interface called, ActionWithPayload, which extends the regular Action interface. ActionWithPayload extends the newer interface, but retains the older payload attribute.
Also we noticed that we can’t use observable$.select and we must wrap it with the ‘pipe’ operation:
Fixing Unit Tests
In order to use the new store mechanism, you need to create a mocked store class:
In order to use it within a test, do the following:
Store will be a mocked instance of the provided state! We can mimic all kinds of states with that!
Final Words
Although it may seem daunting at first, the steps I have outlined are straightforward and not very complicated. If you run into any issues, feel free to drop me a line at : markgrichanik[at]gmail[dot]com.
I would also love to hear any feedback you have while upgrading Angular applications with Swagger and NgRx.
If you liked this article, ? away so that others can read it as well