AngularJS à Angular

William Marques

Freelance
JHipster Angular Stream Leader
JavaScript Lover

@wylmarq

Nomenclature

AngularJS: v1 en 2012
Angular 2: Septembre 2016

Ces deux frameworks n'ont rien à voir !

AngularJS: Angular version 1.x

Angular: Angular version 2+

Pourquoi migrer ?

Depuis Juillet 2018, AngularJS est entré en période LTS.

Les seules mises à jours concerneront:

Patch de sécurité
Incompatibilité avec jQuery
Bugs suite à des mises à jour navigateur

Après le 30 juin 2021, AngularJS ne sera plus maintenu !

D'autres raisons

Meilleures performances
Support TypeScript
Web Components
Angular CLI
Programmation réactive avec RxJS
Recrutement

Notre cas

Les contraintes

Migration en best effort
Migration incrémentale
Livraison de features

Notre choix: NgUpgrade

Permet de faire cohabiter AngularJS et Angular
Système de downgrade/upgrade des composants, services

Taille du JS

Somme de la taille des fichiers JavaScript fournis lors du chargement de la page d'accueil

AngularJS: 4.3Mo

Angular: 1.4Mo

Lazy Loading des locales
Utilisation de l'Ahead Of Time Compilation

Avant de migrer...

Pré-requis

Utiliser au maximum les composants AngularJS
Utiliser webpack comme outil de build
Limiter les dépendances à $rootScope

C'est parti !

Démarrage en mode hybride

import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [AppModule]);
  }
}

Fichier main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Ng2AppModule } from './app.ng.module';

platformBrowserDynamic().bootstrapModule(Ng2AppModule);

Faire cohabiter AngularJS et Angular

Ce qui est possible

Downgrader un composant Angular
Upgrader un composant AngularJS
Downgrader un service Angular
Upgrader un service AngularJS

Ce qui n'est pas possible

Upgrader un filtre AngularJS
Downgrader un pipe Angular
Upgrader/downgrader une directive

Downgrader un composant Angular

@Component({
  selector: 'home',
  templateUrl: 'home.html',
  styleUrls: ['home.scss']
})
export class HomeComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

@NgModule({
  imports: [SharedModule],
  declarations: [HomeComponent]
})
export class HomeNgModule {}

export const HomeNg1Module = angular.module('myApp.home', []).directive(
  'home',
  downgradeComponent({
    component: HomeComponent
  })
).name;

Upgrader un composant AngularJS

export const HomeComponent = {
  template: `
        <div class="container">
            This is my home
        </div>        
    `,
  controller: class HomeController {}
};

export const HomeNg1Module = angular.module('myApp.home', []).component(
  'home',
  HomeComponent)
).name;

@Directive({
  selector: 'home'
})
export class UpgradedHomeComponent extends UpgradeComponent {
  @Input() text: string;

  constructor(elementRef: ElementRef, injector: Injector) {
    super('home', elementRef, injector);
  }
}

@NgModule({
  imports: [SharedModule],
  declarations: [UpgradedHomeComponent]
})
export class HomeNgModule {}

Downgrader un service Angular

@Injectable({ providedIn: 'root' })
export class HeroService {
  constructor(private http: HttpClient) {}
  
  getHeroes() {
    // Getting heroes
  }
}

export const MyModule = angular
  .module('myApp.hero', [])
  .factory('heroService', downgradeInjectable(HeroService)).name;

Upgrader un service AngularJS (1)

export class HeroService {
  constructor($http) {
    'ngInject';
    this.$http = $http;
  }

  getHeroes() {
    // Getting heroes
  }
}

export default angular
  .module('myApp.hero', [])
  .service('heroService', HeroService)

Upgrader un service AngularJS (2)

export function heroServiceFactory(i) {
  return i.get('heroService');
}

@NgModule({
  imports: [SharedModule],
  declarations: [HeaderComponent],
  providers: [{
    provide: 'heroService',
    useFactory: heroServiceFactory,
    deps: ['$injector']
  },]
})
export class HeroNgModule {}



@Component({
  selector: 'header',
  templateUrl: 'header.html',
  styleUrls: ['header.scss']
})
export class HeaderComponent implements OnInit {
  constructor(
    @Inject('heroService') private heroService
  ) {}

  ngOnInit() {}
}

Le routeur

Deux options

Faire cohabiter les deux routeurs
Tout migrer à la fin

Notre choix

Migrer tout à la fin:

Configuration plus simple
Pas d'exception à maintenir sur les deux routeurs

Pas si évident...

Principaux problèmes

Régressions: compatibilité IE, effets de bords
Equivalence de librairies
Spaghetti code : trop de downgrade/upgrade

Recommandations

Ecrivez des tests et / ou end-to-end
Commencez par les pages les moins critiques
Typez tout votre code