Upgrading Angular From v8 to v13
In this publish, I can file what I discovered within the migration of Angular packages v8 to v13. In addition, I can display you the most typical mistakes you can stumble upon within the procedure in addition to their respective answers, indicating the resources when suitable. I spent 1 yr and a part allotted in a department that labored with many packages and a set of elements inbuilt Angular 8. In the closing 2 months of closing yr, we had conferences with the frontend running staff the place the topic of angular utility migration has at all times been talked. Considered a important factor, particularly once we remembered the chance of latest instances such because the log4j vulnerability in Java and the discontinuity of the faker library that affected the initiatives in AngularJS, formally unsupported. Then got here a possibility to paintings with technical debt. When we did this paintings the Angular model used to be 13 and since Google best helps up to 2 earlier variations, Angular 2 thru 10 had been now not supported. Initial pointers We take the revel in we had in migrating the part mission from Angular 8 to 13. These are the conceivable migration approaches: Run a ng replace with every model as a result of it isn’t conceivable thru it to transfer from model Eight directly to 13, so you wish to have to run this command to migrate from 8 to 9, from 9 to 10, and so forth. The merit is that it converts the code robotically, however the strategy of going thru such a lot of variations finally ends up being extra pricey and subsequently it isn’t instructed in our case the place there used to be an opening of five variations. It is also essentially the most suitable possibility for long run migrations. Create a brand new mission in Angular 13 and replica the fonts from the previous mission into Angular 8. Then resolve the issues as they stand up. This manner has been followed for the migration of our part mission and is what we advise on this scenario. Migration roadmap 1) Install the most recent model of Angular npm set up -g @angular/cli 2) Create a brand new mission ng new novo-projeto 3) Copy fonts from an previous mission When copying the fonts it’s instructed to stay the brand new bundle.json that used to be generated to come with and unravel the quite a lot of dependencies on call for in order that on the finish of the method best those actually wanted are integrated, thus additionally assembly the most efficient protection requirements. Update angular variations of the bundle.json of the subprojects (if any) as neatly. 4) Modify tsconfig.lib.json settings Update the tsconfig.lib.json information within the subprojects (if any) to align with the present tsconfig.json information “goal”: “es2017”, “module”: “es2020”, “lib”: [ “es2020”, “dom” ] Common configuration mistakes and answers An unhandled exception passed off: The goal entry-point “@novo-projeto” has lacking dependencies: primeng/toast, primeng/button Add the primeng to the bundle.json. This would be the maximum not unusual error as a result of it’ll happen for all of the quite a lot of dependencies that experience no longer but been integrated, comparable to bootstrap, ng-select, amongst others. Try to at all times outline the model of the dependency corresponding to the present model of Angular within the mission. Other eventualities that may be solved on this approach are mistakes of the kind: Script report ____ does no longer exist. » Read More
Like to keep reading?
This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.