echoするAngularJSアプリケーションを新Angularの環境で動かす

Angularには、AngularJSからの移行を支援するための@angular/upgrade/staticがあります。これを使ってみましょう。

まず、Angular CLIで新Angularの環境を作ります。次のように簡単なAngularJSアプリケーションを組み込みます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
  <input ng-model="yourName">
  {{yourName}}
</body>
</html>

このHTMLにはng-app属性がないため、AngularJSアプリケーションとしては起動しません。

npm startして、localhost:4200 を開くと、次のように表示されます。

f:id:ledsun:20210903163242p:plain — AngularJSアプリケーションとして起動しないので、{{yourName}}がそのまま表示される

npm i @angular/upgrade してインストールします。

app.module.tsを次のように編集します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

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