解決策2：ベースクラスにデコレータを追加する

2024-04-18

Angularで「Class is using Angular features but is not decorated. Please add an explicit Angular decorator」エラーが発生する原因と解決策

Angular 10以降で、Angularの機能を使用しているクラスにAngularデコレータが明示的に追加されていない場合、「Class is using Angular features but is not decorated. Please add an explicit Angular decorator」というエラーが発生します。

原因

このエラーは、以下の2つの状況で発生します。

Angularの機能を使用しているクラスにデコレータが定義されていない
- 例えば、@Input() や @Output() などのデコレータを使用しているクラス

解決策

以下のいずれかの方法で解決できます。

対象クラスにデコレータを追加する

対象クラスに適切なAngularデコレータを追加します。

@Component() デコレータ: コンポーネントクラス
@Directive() デコレータ: ディレクティブクラス
@Injectable() デコレータ: サービスクラス

例：コンポーネントクラスの場合

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  // ...
}

Angularの機能を使用している子クラスが継承しているベースクラスにデコレータを追加します。

ベースクラスがコンポーネントの場合は @Component() デコレータ
ベースクラスがディレクティブの場合は @Directive() デコレータ

例：ベースクラスがコンポーネントの場合

@Component({
  selector: 'app-base-component',
  template: '<ng-content></ng-content>'
})
export abstract class BaseComponent {
  // ...
}

--strictMetadataEmit フラグを使用する

TypeScriptコンパイラオプション --strictMetadataEmit を使用すると、すべてのクラスにデコレータが必要になります。

ng build --strictMetadataEmit

補足

--strictMetadataEmit フラグを使用すると、すべてのクラスにデコレータが必要になるため、コード量が増加する可能性があります。
Angular 9以前では、デコレータがなくてもAngularの機能を使用できましたが、Angular 10以降はデコレータが必須になりました。

class MyComponent {
  @Input() name: string;

  constructor() {
    // ...
  }
}

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  @Input() name: string;

  constructor() {
    // ...
  }
}

@Component({
  selector: 'app-base-component',
  template: '<ng-content></ng-content>'
})
export abstract class BaseComponent {
  @Input() name: string;

  constructor() {
    // ...
  }
}

class MyComponent extends BaseComponent {
  // ...
}

ng build --strictMetadataEmit

このサンプルコードは、問題の発生と解決策をわかりやすく説明するために簡略化されています。実際のコードでは、より複雑な構造やロジックが含まれる場合があります。

Angular で「Class is using Angular features but is not decorated. Please add an explicit Angular decorator」エラーを解決するその他の方法

NgModule の declarations プロパティからクラスを削除する

エラーが発生しているクラスが NgModule の declarations プロパティに宣言されている場合、そのクラスを削除することでエラーを解決できます。

例

@NgModule({
  declarations: [
    OtherComponent,
    // MyComponent を削除
  ],
  imports: [
    // ...
  ],
  providers: [
    // ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

クラスを別のファイルに移動する

エラーが発生しているクラスを別のファイルに移動することで、エラーを解決できる場合があります。

// my-component.component.ts
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  @Input() name: string;

  constructor() {
    // ...
  }
}

// my-component.html
<div>
  <h1>{{ name }}</h1>
</div>

// my-component.css
.my-component {
  font-family: sans-serif;
}