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:
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):
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.
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.