AngularJS + Angular (v6) hybrid (konečně!)

Konečně je čas to uskutečnit! Web provozuji a spravuji již asi 2,5 roku. Tento web je vytvořen pomocí AngularJS (v1.6.9). Funguje to poměrně dobře, ale nic ve srovnání s novějšími verzemi Angular. Takže jsem konečně udělal první kroky k migraci všeho na novější verzi, postupně. Udělal jsem to takto:

1. Vytvořte nový projekt Angular CLI
2. Zkopírujte a převeďte všechny soubory JavaScript do TypeScript
3. Nahrazení adres URL absolutní šablony za adresy URL relativní
4. Vyladění nastavení Angular CLI tak, aby vyhovovalo AngularJS
5. Zahrnutí AngularJS do vaší aplikace Angular

Vytvořte nový projekt Angular CLI

Protože nikdo nechce znovu vynalézat kolo, postupujte podle tohoto „oficiálního“ průvodce a vytvořte nový projekt:https://angular.io/guide/quickstart

Zkopírujte a převeďte všechny soubory JavaScript do TypeScript

Může se zdát, že je to docela snadné, což bylo... na začátku, ale existuje více než jen změna přípony souboru. Chcete-li přejmenovat všechny soubory z ".js" na ".ts", můžete dělat, co chcete. Můžete to udělat ručně, pomocí rozšíření NPM nebo prostřednictvím vašeho terminálu. Rozhodl jsem se použít rozšíření NPM:Renamer. Pokud chcete použít totéž, postupujte podle následujících příkazů:

npm i -g renamer

a skutečně přejmenovat soubory:

renamer --find '.js' --replace '.ts' 'root/folder/of/app/**/*.js'

Tím budou všechny vaše soubory JavaScript přejmenovány na soubory TypeScript. Dále, pokud ještě nepracujete s ES6/ES2015, budete chtít převést svůj Javascript do tohoto formátu. TypeScript nefunguje s funkcemi bez šipek. Také budete chtít začít používat direktivy JavaScriptu „import“ a „export“ namísto „vyžadovat“. To pomůže Webpacku (vestavěnému s Angular CLI) vytvořit vaši aplikaci později.

Jakmile svůj kód přejmenujete a přepíšete, můžete jej zkopírovat do projektu Angular CLI, který jste vytvořili dříve. Postupujte podle následujícího průvodce, od „Vytvoření řetězce importu“, dokud se nedostanete k „Konfigurovat úhlové CLI“:Vytvoření hybridu. V tuto chvíli byste měli mít všechny své soubory ve formátu TypeScript a integrovány do vašeho „nového“ projektu Angular CLI.

Nahrazení adres URL absolutní šablony za adresy URL relativní

V tuto chvíli byste již mohli začít kompilovat aplikaci, ale pokud jste používali absolutní adresy URL šablony jako já, narazíte na chyby. Angular CLI používá Webpack ke kompilaci svých souborů TypeScript do Javascriptu a poté do balíčku. Webpack vyžaduje použití relativních cest. Nyní tedy nahraďte všechny své absolutní cesty šablony relativními. Ty mohou být umístěny v direktivách (nebo komponentách), vašem routeru nebo jakýchkoli řadičích.

Vyladění nastavení Angular CLI tak, aby vyhovovalo AngularJS

V tomto okamžiku budete moci plně zkompilovat svou hybridní aplikaci, ale pouze pro účely vývoje. Jakmile se pokusíte zkompilovat aplikaci s produkčními příznaky:

ng build --prod

Nebudete moci načíst aplikaci ve vašem prohlížeči. Důvodem je, že Webpack se pokusí vyřešit všechny funkce a zkompilovat je do základního Javascriptu. To funguje pro Angular (v6), ale ne pro AngularJS. Chcete-li tento problém vyřešit, upravte v souboru „angular.json“ následující nastavení:

/*This is the old situation*/
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "serviceWorker": true
  }
}

/*And this is the new situation*/
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": false, //Updated, remove this comment if you copy/paste
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": false, //Updated, remove if copy/paste
    "serviceWorker": true
  }
}

Zahrnutí AngularJS do vaší aplikace Angular

Jsi skoro hotový! Posledním krokem je zahrnutí vaší aplikace AngularJS do vaší nové, lesklé aplikace Angular. Můžete to udělat podle návodu „Bootstrap the hybrid“, na který jsem vás upozornil dříve:Vytvořte hybrid. Pokud chcete mít možnost používat nové komponenty Angular ve vaší aplikaci AngularJS, postupujte podle následujících kroků:Upgrade Angular. Tato příručka vám také ukáže, jak můžete používat komponenty AngularJS v Angular, ale doporučil bych pokusit se upgradovat co nejvíce těchto komponent na Angular (v6). Stejně budou muset být někdy upgradovány, takže toto je ideální příležitost!

Nyní můžete konečně vytvořit svou aplikaci pro produkční účely! Jakmile vše kompletně převedete na Angular (v6), budete moci znovu používat AOT a Build optimizer, díky čemuž bude vaše aplikace ještě efektivnější. Je možné, že jsem udělal chybu ve svém vlastním procesu, a proto AOT v současné době nefunguje, ale bude potřeba počkat na revizi.

Poznámky

Tento průvodce nebude fungovat pro každého, osobně jsem použil 3 nebo 4 různé průvodce a ještě více vyhledávání Google, abych se dostal na správné místo. Tento upgrade není nejjednodušší věc, kterou kdy uděláte, ale bude to velmi stát za to. Hodně to zlepší stabilitu a spolehlivost vaší aplikace. Vyřeší také jakékoli problémy se SEO, které jste mohli mít s AngularJS, protože Angular je ve skutečnosti schopen vykreslovat na (uzlovém) serveru!

Pokud máte nějaké dotazy nebo lépe návrhy, jak mohu tento proces usnadnit vám i mně, zanechte prosím komentář. Rád bych vám pomohl nebo se poučil z vašich zkušeností s tímto pekelným upgradem! Pokud byste si chtěli přečíst více o mém boji s Angular a SEO, podívejte se na:Jak indexovat jednostránkovou aplikaci postavenou v AngularJS.