Migrate AngularJS to Angular using UpgradeModule (Part 7) – end

Danny Cornelisse
17-12-2018

Part 1: Setting up the hybird app

Part 2: Refactor constants, values and services

Part 3: Refactor components

Part 4: Refactor directives

Part 5: Phase out angularJS services

Part 6: Remove dependent libraries and remove angularJS

Part 7: Deployment and build

Refactoring angularJS to Angular

The previous steps explained how to set up the hybrid application (step 1), how to refactor constants, values and services (step 2), how to refactor components (step 3), how to refactor directives (step 4), how to phase out angularJS services (step 5) and how to remove angularJS from the project. This last step discusses the impact on the development and build configuration of the app.

Development and build

The Angular CLI ships with an automated webpack configuration to make builds for development and production. This is very flexible and allows for various options for an optimal build:

https://github.com/angular/Angular CLI/wiki/buildhttps://github.com/angular/Angular CLI/wiki/build

It is even possible to tweak the webpack.config.js by ejecting it from the project (this makes the webpack.config.js available for editing):

ng eject

However, this is not recommendable, as Angular CLI is a tightly configured development and build tool. Only do this if it is absolutely necessary and consult the web before doing this. A solution may be possible using the angular-cli.json or other config files.

Conclusion

The UpgradeModule provided by the Angular team is certainly an excellent tool to migrate angularJS apps to Angular. This blog series builds on that and provides a slightly different approach, including the Angular CLI. Specifcally, this approach does not require the developer to migrate to webpack as a build tool and also is suited for angularJS apps that are not written in ES6 modules, as discussed in part 1. From my own experience, I think that building your own webpack config is very tedious (I tried this and the time it took to compile my code was ridiculous).  I made use of the native webpack config provided by the Angular CLI, which makes development way easier. Nonetheless, I still had some troubles with some of the migration. After long trying, I still couldn’t find a way to support unit tests for both angularJS and Angular at the same time. This actually has the implication that this approach is probably not suitable for production, if you want to use unit tests for automated build and deployment. If anyone finds a good solution, please provide it in the comments.

If  you’re still reading this by now, thanks for reading and I hope you learned something.

 

Cheers

LEAVE A REPLY

you might also like