Tips for migrating your current Angular version

TIPS FOR MIGRATING YOUR CURRENT ANGULAR VERSION

Migrating your current Angular version to a newer one can stem from various needs, ranging from specific business requirements to the adoption of new functionalities or library updates. In this post, I'll share my tips and key advice based on my experience migrating a mono-repo Angular application from v9 to v16.

Keep in mind

• This post focuses on migrations from Angular 9 onwards, excluding AngularJS.

• Utilize the migration guide provided by Angular.

• Familiarize yourself with the packages in your project within the package.json file.

Tips

1. Understand your limitations before deciding on the final version. Carefully review your package.json, especially third-party packages, as they can be critical for migration.

2. Check the support status of each library in its respective repository. Some older libraries may have ceased updates, potentially necessitating replacement or a decision on their significance to the project logic.

3. Define up to which version you wish to migrate your project, considering the limitations of the libraries. If you cannot replace a package, it is recommended to migrate to the latest possible Angular version.

4. Follow the migration guide closely. While you can choose the project's complexity level, opting for the most comprehensive version is typically the best choice.

5. In case of conflicts between libraries, consider using commands like npm install --legacy-peer-deps or npm install --force, although ideally, you should seek versions without conflicts or replace the problematic library.

6. Document all libraries that need to be migrated along with the Angular version. Review the changelogs within repositories or CHANGELOG.md files to understand the necessary changes.

Considerations

While it is possible to migrate directly from one version to another, it is recommended to perform incremental migrations, updating version by version with ng update, which helps maintain organized code and facilitates testing at each stage.

If you use a CSS framework like Bootstrap, you may need to update it. When migrating to newer versions, you may encounter changes in the used components, so it is important to follow Bootstrap's official documentation and adjust the code accordingly.

Conclusions

Migrating to a newer version of Angular can improve development performance and reduce compilation times while allowing you to eliminate obsolete packages.

Angular provides a set of tools that often work out of the box, making the process as simple as following their provided guidelines and running the commands.

However, the big challenge when upgrading is testing and updating third-party libraries. This process requires time and effort, especially in complex projects. It is important to stay informed about updates to key libraries and review their stability and frequency of bug fixes. Additionally, when installing new libraries, ensure that they not only migrate @angular/core but also their dependencies to avoid future conflicts.