(WIP) NgUpgradeのドキュメント読む

angular

読んだドキュメント

実際に利用したか

  • すみません。自分たちのプロジェクトには利用していません。

理由

  • しばらくは大きな改善や機能追加がなさそうなので、移行作業に集中する時間を確保できそうだった。
    • これが主な理由
  • 今のAngularJSアプリケーションにAngularを導入することは結構簡単。ただ、同時にアップデートしたいことがいくつかあった。
    • Angualr CLI環境にしたい
    • 利用しているCSSフレームワークをアップデートしたい
    • UI RouterからAngular Routerに変更したい
  • 多言語対応しているアプリなので、対応が面倒になりそう。
    • （そうでもないかもしれない。この時点であまり深く考えなくなった。）

以下メモです。

NgUpgrade in Depth

NgUpgrade in Depth – nrwl

Bootstrapping

This is a good default because components upgraded from AngularJS to Angular require an AngularJS ancestor component, and this way of bootstrapping guarantees that.

コンポーネントツリーの上流にAngularJSコンポーネントが必要。

Capturing AngularJS and Lazy Loading

“@angular/upgrade/static” captures window.angular.

import 'angular';
import { UpgradeModule } from '@angular/upgrade/static';

angularを先に読み込む必要がある。

Component Integration

This creates an AngularJS directive with the appRoot selector. This directive will use AppComponent to render its template. Because of this indirection, we need to register AppComponent as an entry component.

（AngularJSにするコンポーネントをエントリーコンポーネントに登録する理由）

So the <app-root> element itself is owned by AngularJS, which means that we can apply other AngularJS directives to it. Its template, however, is rendered using Angular.

したがって、<app-root>要素自体はAngularJSによって所有されています。つまり、他のAngularJSディレクティブを適用することができます。ただし、そのテンプレートはAngularを使用してレンダリングされます。

UI Routerの場合

GitHub - ui-router/angular-hybrid: Upgrade an ng1 UI-Router app to a ng1+ng2 hybrid using ng-upgrade

We currently support routing either Angular (2+) or AngularJS (1.x) components into an AngularJS (1.x) ui-view. However, we do not support routing AngularJS (1.x) components into an Angular (2+) ui-view.

現在Angular（2+）またはAngularJS（1.x）コンポーネントをAngularJS（1.x）UIビューにルーティングしています。ただし、AngularJS（1.x）コンポーネントをAngular（2+）UIビューにルーティングすることはサポートしていません。

ルーターを利用する場合

記事ではルータを利用していない。実際のアプリケーションでは以下対応が必要。

Component Router does not work with Upgrade Adapter · Issue #9870 · angular/angular · GitHub

export class AppComponent implements OnInit {
  constructor(
    router: Router
  ) {
    router.initialNavigation();
  }
  // ...
}

Angular - Upgrading from AngularJS

Angular Docs

  • バージョン違いのコンポーネントをどのように両立、橋渡しするか
  • テンプレートの中の世界（AngularJSなのかAngualrなのか）は、そのコンポーネントが何でつくられているかによる
  • 「アップグレードする、ダウングレードするとは、対象のテンプレート内で利用できるようにすること」と考えるとすっきりする

The DOM element <a-component> will remain to be an AngularJS managed element, because it’s defined in an AngularJS template. That also means you can apply additional AngularJS directives to it, but not Angular directives. It is only in the template of the <a-component> where Angular steps in. This same rule also applies when you use AngularJS component directives from Angular.

DOM要素<a-component>は、AngularJSテンプレートで定義されているため、AngularJSが管理する要素のままです。 つまり、AngularJSディレクティブを追加できますが、Angularディレクティブは適用できません。 <a-component>のテンプレートにのみ、Angularが入る。これは、AngularのAngularJSコンポーネントディレクティブを使用する場合にも適用されます。

Note that you do not add a bootstrap declaration to the @NgModule decorator, since AngularJS will own the root template of the application.

AngularJSはアプリケーションのルートテンプレートを所有するためbootstrap、@NgModuleデコレータに宣言を追加しないことに注意してください。