Build Errors
一般的な間違い
デコレーターにて丸括弧を忘れる
デコレーターはアノテーションの後に丸括弧 ()
を持つべきです。いくつか例を示します: @Injectable()
, @Optional()
, @Input()
, など。
@Directive({
selector: 'my-dir',
})
class MyDirective {
// 誤り、@Optional() とすべき
// @Optional はここでは何もしないため、MyDirective は parent が undefined の場合にエラーになる
constructor(@Optional parent: ParentComponent) {}
}
一般的なエラー
すべてのパラメータを解決できない
Cannot resolve all parameters for 'YourClass'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'YourClass' is decorated with Injectable.
この例外は Angular が YourClass
のコンストラクタの 1 つ以上のパラメータについて困惑していることを意味します。依存性を注入 するため、Angular は 注入するパラメータの型を知る必要があります。パラメータのクラスを指定することで Angular にこのこと(タイプ)を知らせます。次の点を確認してください:
- パラメータのクラスをインポートします。
- パラメータに適切な注釈をつけるか、パラメータの型を指定します。
import { MyService } from 'my-service'; // 私をインポートすることを忘れないで!
@Component({
template: `Hello World`,
})
export class MyClass {
// service は MyService のタイプです
constructor(service: MyService) {}
}
コード内の循環参照がこのエラーの原因になることがあります。循環参照は、2 つのオブジェクトが相互に依存していることを意味するため、両方を相互の前に宣言する方法はありません。この問題を回避するには、Angular に組み込まれているforwardRef
関数を使用します。
import { forwardRef } from '@angular/core';
@Component({
selector: 'my-button',
template: `<div>
<icon></icon>
<input type="button" />
</div>`,
directives: [forwardRef(() => MyIcon)], // MyIcon はまだ定義されていません
}) // forwardRef は MyIcon が必要なときに MyIcon として解決します
class MyButton {
constructor() {}
}
@Directive({
selector: 'icon',
})
class MyIcon {
constructor(containerButton: MyButton) {} // MyButton が定義されました
}