AngularJS siirtyy ylläpitoon heinäkuussa 2018. Mitä se tarkoittaa?

Blogi Softa

Suositusta Angular-frameworkista on olemassa kaksi sukupolvea. Ensimmäinen eli AngularJS käsittää versiot 1.x., uudempi Angular tarkoittaa versiota 2 ja sitä uudempia versioita. Julkaistuaan AngularJS:n viimeisen 1.7 version, Google siirtää kehityspanostuksensa Angular:iin, jonka tuki siis jatkuu.

AngularJS:n ylläpitoaika (long term support) kestää kolme vuotta ja tuki loppuu kokonaan 30.6.2021. Sen jälkeen kaikki AngularJS -sovellukset voivat periaatteessa lakata toimimasta.

Ylläpitoaikana 1.7.2018 – 30.6.2021 ei enää julkaista

  • uusia toiminnallisuuksia, eikä
  • mitään muutoksia, jotka aiheuttaisivat taaksepäin yhteensopivuuden loppumisen.

Ylipäätään korjauksia julkaistaan vain, jos

  • jonkin merkittävän selaimen (major browser) tai jQuery-kirjaston uusi versio aiheuttaa AngularJS-sovellusten toimimattomuuden, tai
  • kyseessä on kriittinen turvallisuuspäivitys.

Oma odotuksemme on, että ylläpitoaikana ei käytännössä julkaista juuri lainkaan korjauksia.

Mitä sovelluskehittäjien sitten pitää tehdä?                        

Ongelmien välttämiseksi kaikki AngularJS sovellukset pitää päivittää 2021 mennessä. Näkemyksemme mukaan helpoin migraatioreitti on seuraava.

  1. Uutta AngularJS -koodia ei enää kannata kirjoittaa, koska se joudutaan joka tapauksessa kirjoittamaan pian uudestaan.
  2. Nykyinen koodi päivitetään käyttämään komponenttisyntaksia. Tämä vaatii AngularJS version 1.5 tai uudemman, mieluiten päivitetään tässä yhteydessä käyttöön uusin AngularJS 1.7 versio.
  3. Integroidaan komponentit uuteen Angular5 -projektiin. Komponenttisyntaksin mukaisen JavaScriptin voi ottaa mukaan lähes sellaisenaan.
  4. Nyt kaikki uusi kehitys voidaan tehdä Angular5:lla ja TypeScriptillä. Verrattuna JavaScriptiin vahvasti tyypitetty ja oliopohjainen TypeScript nostaa kehitystiimin tehokkuutta. Jos käytössä on ollut ES6, siirtyminen JavaScriptista TypeSciptiin on triviaalia.
  5. Kun vanhoihin AngularJS-komponentteihin tarvitaan uusia toiminnallisuuksia, ne päivitetään komponentti kerrallaan Angular5/TypeScript -maailmaan.

Esimerkki

Seuraavaksi tarkemmat ohjeet miten migraatio tehdään. Lähtötilanteena on modulaarinen AngularJS 1.5 tai uudempi sovellus, joka käyttää jo komponenttisyntaksia. CSS käännös tehdään LESS tyyleistä ja tärkein kolmannen osapuolen riippuvuus on UI-Router.

Vaihe 1 – lähdekoodien siirto

  1. Angular-komentorivillä (angular-cli) tehdään uusi Angular5-projekti
ng new ngAppName –-style=less
  1. Asennetaan Angular Upgrade moduuli
npm i @angular/upgrade
  1. Sallitaan *.js tiedostot Typescript-kääntäjälle
tsconfig.json

  allowJs: true
  1. Kopioidaan olemassa oleva sovellus uuden projektin hakemistoon, esimerkiksi
/src/app/angularjs
  1. Asennetaan alkuperäisen sovelluksen riippuvuudet
npm i paketin-nimi

tai kopioidaan riippuvuudet package.json -tiedostoon ja asennetaan komennolla

npm i
  1. Asennetaan Ui-router Hybrid moduuli
npm i @uirouter/angular-hybrid

Vaihe 2 – koodimuutokset

  1. Poistetaan Angular-sovelluksen käynnistyminen (Automatic bootstrap)
app.module.ts

import ng1App from ‘./angularjs/app’

@NgModule({
  …
  bootstrap: []
  …
})
  1. Lisätään UIRouter Upgrade moduuli Angular applikaatiolle
app.module.ts

@NgModule({
  …
  imports: [
      …
      UIRouterUpgradeModule.forChild()
  ]
  …
})
  1. Lisätään AngularJS sovelluksen käynnistys
app.module.ts

export class AppModule {

  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {

      setAngularJSGlobal(angular);

      this.upgrade.bootstrap(document.body, [ng1App.name], {strictDi: true} );
  }
}
  1. Ohjeistetaan UIRouter:a odottamaan kunnes koko käynnistyssekvenssi on valmis
main.ts

import ng1App from ’./app/angularjs/app’;

ng1App.config([ ’$urlServiceProvider’, 
                ($urlService: UrlService) => $urlService.deferIntercept()]);
  1. AppModulen käynnistymisen jälkeen aktivoidaan UIRouter
main.ts

platformBrowserDynamic().bootstrapModule(AppModule)

  .then(platformRef => {

    const urlService: UrlService = platformRef.injector.get(UIRouter).urlService;

    urlService.listen();

    urlService.sync();

  })

  .catch(err => console.log(err));
  1. Lisätään index.html:n UIRouter:n elementti
index.html

<div ui-view></div>

<app-root></app-root>
  1. Lisätään tyylit
styles.less

@import "app/angularjs/app.less";

Lopputuloksena sovelluksen olemassaoleva AngularJS -koodi toimii Angular-ympäristössä. Koodin jatkokehitys voidaan tehdä valinnan mukaan JavaScript- tai TypeScript-kielellä, sen mukaan mikä on tarkoituksenmukaisinta.