🐡

Angular v20 standalone

2025/07/03に公開

Angular Standaloneに関することをメモする。
特徴Angular v14から導入された、コンポーネント設計の仕組みのこと。
コンポーネントごとにディレクティブ、パイプ、コンポーネントをimportできる。
以前は、ngModuleに登録し、Module単位で管理していた。管理単位がより小さくなった、ということ。
Angular V19以前は、standalone オプションはデフォルトでfalseである。そのため、古いコード、マイグレーション時には注意する必要がある。
Angular V20以降は、standalone オプションはデフォルトでtrueである。
Angular V20以降
ng new {アプリケーション名}によって作成されたコンポーネントには、standalone プロパティの記載はない。記載がない場合は、デフォルトでtrueとなっている。

ng generate component {コンポーネント名}  で作成したコンポーネントでも同様である。
import { Component } from '@angular/core';

@Component({
  selector: 'app-sample-component',
  imports: [],
  templateUrl: './sample-component.html',
  styleUrl: './sample-component.scss'
  //standalone プロパティが存在しない。
})
export class SampleComponent {
}
--no-standalone オプションを使用して生成した場合は、standalone プロパティはfalseと設定される
その場合は、importプロパティが存在しない。
実行例
ng new {アプリケーション名} --no-standalone
ng generate component {コンポーネント名} --no-standalone

import { Component } from '@angular/core';

@Component({
  selector: 'app-no-standalone-component',
  standalone: false, // ←ここに設定される。importプロパティも無し。
  templateUrl: './no-standalone-component.html',
  styleUrl: './no-standalone-component.scss'
})
export class NoStandaloneComponent {
}
補足importsで警告が出る場合VSCode で Angular Language Serviceを使用していると、下記エラーが表示される。

'imports' is only valid on a component that is standalone.(-992010)


Angular Language ServiceがAngular の versionを認識していないために起きている。standaloneプロパティが無く、falseと認識され、importsが設定不可であると警告が出ている。Angular v19まではこの警告は正しかったのだが、v20からはデフォルトでtrueになってしまったため、importsプロパティが設定されているのが正しい。
無視しても問題ないが、Angular Language ServiceのExtension設定にエラーコードを指定すれば警告が出なくなる。

特徴

Angular V20以降

補足importsで警告が出る場合

Discussion