作成日: 2020/06/01 最終更新日: 2020/09/04
文書種別
技術情報
詳細
Angular9(Ivy)でWijmoコンポーネントを継承した場合、@Componentのtemplateを指定する箇所で下記のエラーが発生します。
----------------------------------------
error NG1010: template must be a string
----------------------------------------
まず、Angular9(Ivy)では「wijmo」のようなScoped形式ではないパッケージは利用することができません。
※Scoped packageとは、「@corp/package-name」という形式の名称のパッケージのことを指します。
そのため、従来の「wijmo」パッケージではなく、スコープ付きの「@grapecity/wijmo」のパッケージを利用する必要があります。
新しいnpmパッケージの使用方法と移行方法の詳細については、製品ヘルプの「npmによるWijmoの参照」をご参照ください。
また、@Component デコレーターにて定義している templateは明示的に指定する必要があり、継承元のコンポーネントのメタデータから読み取ることはできません。
単純なコンポーネントの場合は ''、 子コンテンツが含まれる可能性のあるコンポーネントの場合は '<div> <ng-content> </ng-content> </div>'を指定してください。
また、inputs、outputsは継承元クラスから継承されますので、指定する必要はありません。継承元クラスのメタデータを指定すると、下記のエラーが発生します。
----------------------------------------
error NG1010: Failed to resolve @Directive.inputs to a string array
----------------------------------------
この派生コンポーネントで新たに追加されたプロパティやイベントを定義する場合は、下記のようなコードで指定できます。
----------------------------------------
inputs: ['newProperty'],
outputs: ['newEvent'],
----------------------------------------
上記の詳細な実装方法については、こちらのサンプルをご参考ください。
----------------------------------------
error NG1010: template must be a string
----------------------------------------
まず、Angular9(Ivy)では「wijmo」のようなScoped形式ではないパッケージは利用することができません。
※Scoped packageとは、「@corp/package-name」という形式の名称のパッケージのことを指します。
そのため、従来の「wijmo」パッケージではなく、スコープ付きの「@grapecity/wijmo」のパッケージを利用する必要があります。
新しいnpmパッケージの使用方法と移行方法の詳細については、製品ヘルプの「npmによるWijmoの参照」をご参照ください。
また、@Component デコレーターにて定義している templateは明示的に指定する必要があり、継承元のコンポーネントのメタデータから読み取ることはできません。
単純なコンポーネントの場合は ''、 子コンテンツが含まれる可能性のあるコンポーネントの場合は '<div> <ng-content> </ng-content> </div>'を指定してください。
また、inputs、outputsは継承元クラスから継承されますので、指定する必要はありません。継承元クラスのメタデータを指定すると、下記のエラーが発生します。
----------------------------------------
error NG1010: Failed to resolve @Directive.inputs to a string array
----------------------------------------
この派生コンポーネントで新たに追加されたプロパティやイベントを定義する場合は、下記のようなコードで指定できます。
----------------------------------------
inputs: ['newProperty'],
outputs: ['newEvent'],
----------------------------------------
上記の詳細な実装方法については、こちらのサンプルをご参考ください。
旧文書番号
85661