Upgrade Angular 1.4 to greater

Issue

I have the below project structure. I am trying to upgrade the project to higher version.

I need suggestions on using ngUpgrade.

Solution

I've just finish upgrading AngularJs 1.4 application with over 50 directives and 90 services to Angular 8.

The approach I took is as follows:

1. If you are using a bundler that isn't webpack(e.g requireJs), first migrate to webpack. link to article how to upgrade webpack from requireJs for example
2. Create a new Angular project that will live side by side with your 1.4 one:

Project
-app  // Your AngularJs app
--Controllers
--Services
--etc..
-ng_app // Your Angular app
--Components
--Services
--etc..
angular.json
webpack.config.js
Global.asax
packages.config

3. Change angular.json builders to work with @angular-builders/custom-webpack so you could compile your two application - Meaning your Hybrid application - with your webpack configuration and Angular injected configuration.

4. Start Upgrading AngularJs services and directives. At this point your AngularJs application should be bootstrapped first. You'll still Bootstrap your AngularJs app from Angular via:

export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
  }
}

But the main idea here is that @NgModule for AppModule won't contain bootstrap configuration. Only entryComponents (if you are using angular version8 and less) that will be opened from your AngularJs application via downgraded statements.

5. After you upgraded enough services and components, switch Angular to bootstrap first, and bootstrap AngularJs lazily. Here you should bootstrap Angular first. It means to also populate the bootstrap configuration in @NgModule AppModule with AppComponent.

6. Finish upgrading all AngularJs services and directives.

Answered By - Raz Ronen