[解決済み] 合成プロパティ @enterAnimation が見つかりました。BrowserAnimationsModule "か "NoopAnimationsModule "のどちらかをインクルードしてください。アンギュラ4
2022-12-14 16:58:06
質問
Angular4アプリケーションをテストするためにKarmaを実行すると、次のエラーが表示されます。
Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
ですでにモジュールをインポートしているにもかかわらず
app.module.ts
// animation module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
imports: [...
BrowserAnimationsModule,
...
],
で、私の コンポーネント :
import { Component, OnInit } from '@angular/core';
import {
trigger,
state,
style,
animate,
transition
} from '@angular/animations';
@Component({
selector: 'app-about',
animations: [
trigger(
'enterAnimation', [
transition(':enter', [
style({ transform: 'translateX(100%)', opacity: 0 }),
animate('500ms', style({ transform: 'translateX(0)', opacity: 1 }))
]),
transition(':leave', [
style({ transform: 'translateX(0)', opacity: 1 }),
animate('500ms', style({ transform: 'translateX(100%)', opacity: 0 }))
])
]
),
trigger(
'enterAnimationVetically', [
transition(':enter', [
style({ transform: 'translateY(100%)', opacity: 0 }),
animate('500ms', style({ transform: 'translateY(0)', opacity: 1 }))
]),
transition(':leave', [
style({ transform: 'translateY(0)', opacity: 1 }),
animate('500ms', style({ transform: 'translateY(100%)', opacity: 0 }))
])]
)
],
...
アプリケーションは
ng serve
では問題なく動作しますが、karmaではこのようなエラーが発生します。
どのように解決するのですか?
私は解決策を見つけました。私はちょうどインポートする必要がありました
app.component.spec.ts
と同じインポート
// animation module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
imports: [...
BrowserAnimationsModule,
...
],
関連
-
[解決済み] '合成プロパティ @panelState を発見しました。BrowserAnimationsModule" か "NoopAnimationsModule" のどちらかを入れてください'。
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ