Upgrading from AngularJS to Angular is like building a bridge between 2 frameworks.
Webpack is going to create a bundle for a browser. In our webpack configuration file we specify an entry point, usually named main.ts
On our entry we are going to do a few things:
- Bootstrap Angular root module (aka raising the first framework).
- Our root module imports UpgradeModule from ‘@ngular/upgrade/static’. UpgradeModule is a bridge between Angular & AngularJs.
- UpgradeModule exposes bootstrap() method to bootstrap AngularJs module (aka raising the second framework).
Two frameworks are up & running side by side. They are connected with the bridge. We are in hybrid mode.
One more thing that is going to happen on entry: Register Angular component as AngularJs directive from a specific AngularJs module.
We are going to use this bridge between 2 frameworks to migrate pieces in both directions. For example, we can now add our 1st Angular component in hybrid mode, that component can use AngularJs service.