CODEWITHSUNDEEP
angularjs
user2654283
user2654283

Reputation: 45

Upgrade Angular 1.4 to greater

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

I need suggestions on using ngUpgrade.

Upvotes: 0

Views: 134

Answers (1)

Raz Ronen
Raz Ronen

Reputation: 2638

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

  1. 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.

  2. 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.

  1. 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.

  2. Finish upgrading all AngularJs services and directives.

Upvotes: 1

Related Questions