Angular 15 がリリースされました

2022/11/18 に Angular v15 がリリースされたので、早速インストールしてみた。v14の時の記事はこちら

インストール
動作確認
standalone化

インストール

@angular/cli をグローバルにインストールしない方法でやってみる。

npx install @angular/cli@15 new v15-sample1

途中質問が表示されるので回答する。

? Would you like to add Angular routing? No　　　　　　・・・ルーティングを使用する場合 y だが今回は N
? Which stylesheet format would you like to use? CSS  ・・・CSSのほかscss|sass|less が選べる

実行したフォルダに v15-sample1 フォルダが作成される。

動作確認

cd v15-sample1
npm run ng serve

ブラウザで http://localhost:4200/ にアクセスすると、デフォルトの画面が表示される。

package.json はこんな感じ。

{
  "name": "v15-sample1",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.2",
    "@angular/cli": "~15.0.2",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.8.2"
  }
}

standalone化

src/main.ts を修正

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

を

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

に変更する

src/app/app.component.ts を修正

standalone: trueを追加する
app.component.htmlでngSwitch, ngSwitchCase, ngSwitchDefaultが使用されているので、@angular/commonからインポートする

import { Component } from '@angular/core';
import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; // 追加

@Component({
  selector: 'app-root',
  standalone: true, // 追加
  imports: [NgSwitch, NgSwitchCase, NgSwitchDefault], // 追加
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'v15-sample1';
}

ユニットテスト

v14をインストールしたときはやらなかったが、テストを実行してみる。

npm run ng test

エラーになった

Error: Unexpected "AppComponent" found in the "declarations"
array of the "TestBed.configureTestingModule" call,
"AppComponent" is marked as standalone and can't be declared in any NgModule
- did you intend to import it instead (by adding it to the "imports" array)?

app.component.spec.ts を修正する

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  });

これを

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        AppComponent
      ],
    }).compileComponents();
  });

こうする