'合成プロパティ@panelStateが見つかりました。アプリケーションに「BrowserAnimationsModule」または「NoopAnimationsModule」のいずれかを含めてください。

Angular-seedを使用してAngular 4プロジェクトをアップグレードしたところ、エラーが発生しました

合成プロパティ@panelStateが見つかりました。アプリケーションに「BrowserAnimationsModule」または「NoopAnimationsModule」のいずれかを含めてください。

どうすれば修正できますか？エラーメッセージは正確に何を教えてくれますか？

@angular/animationsパッケージがインストールされていることを確認します（例：を実行してnpm install @angular/animations）。次に、あなたのapp.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...,
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})

このエラーメッセージは誤解を招くことがよくあります。

のインポートを忘れた可能性がありBrowserAnimationsModuleます。しかし、それは私の問題ではありませんでした。誰もがそうするようBrowserAnimationsModuleに、私はroot にインポートしてAppModuleいました。

問題は、モジュールとはまったく無関係なものでした。*ngIfコンポーネントテンプレートでをアニメーション化していました @Component.animations が、コンポーネントクラスので言及するのを忘れていました。

@Component({
  selector: '...',
  templateUrl: './...',
  animations: [myNgIfAnimation] // <-- Don't forget!
})

テンプレートでアニメーションを使用する場合は、そのアニメーションをコンポーネントのanimationsメタデータにリストする必要があります... 毎回。

を使用しようとしたときに、同様の問題に遭遇しましたBrowserAnimationsModule。次の手順で問題が解決しました：

1. node_modules dirを削除します
2. を使用してパッケージキャッシュをクリアする npm cache clean
3. ここにリストされているこれらの2つのコマンドのいずれかを実行して、既存のパッケージを更新します。

次のような404エラーが発生した場合

http://.../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

system.config.jsに次のエントリを追加mapします。

'@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
'@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'

naveedahmed1がこのgithubの問題の解決策を提供しました。

これをインストールするだけで

npm install @angular/animations@latest --save  

そしてインポート

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 

あなたのapp.module.tsファイルに。

私にとっては、@ Componentデコレーターでこのステートメントを見逃しました：アニメーション：[yourAnimation]

このステートメントを追加すると、エラーはなくなりました。（Angular 6.x）

私の問題は、私の@ angular / platform-b​​rowserがバージョン2.3.1にあったことでした。

npm install @angular/platform-browser@latest --save

4.4.6にアップグレードするとトリックが行われ、node_modules / @ angular / platform-b​​rowserの下に/ animationsフォルダーが追加されました

アニメーションモジュールをインストールしたら、アプリフォルダー内にアニメーションファイルを作成します。

router.animation.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
    export function routerTransition() {
        return slideToTop();
    }

    export function slideToRight() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
            ])
        ]);
    }

    export function slideToLeft() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
            ])
        ]);
    }

    export function slideToBottom() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' }))
            ])
        ]);
    }

    export function slideToTop() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))
            ])
        ]);
    }

次に、このアニメーションファイルを任意のコンポーネントにインポートします。

あなたのcomponent.tsファイルで

import { routerTransition } from '../../router.animations';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  animations: [routerTransition()]
})

app.module.tsにアニメーションをインポートすることを忘れないでください

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

アニメーションは特定のコンポーネントに適用する必要があります。

EX：他のコンポーネントでアニメーションディレクティブを使用し、別のコンポーネントで提供されています。

CompA --- @Component（{

アニメーション：[アニメーション]}）CompA --- @Component（{

アニメーション：[アニメーション] <===これは中古コンポーネントで提供される必要があります}）

私にとっては、アニメーション名を角括弧の中に入れたからです。

<div [@animation]></div>

しかし、ブラケットを削除した後、すべて正常に動作しました（Angular 9.0.1）。

<div @animation></div>

エラーが発生しました：

Found the synthetic property @collapse. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

私はプロッピーによって受け入れられた答えに従い、それが私の問題を解決しました。

手順は次のとおりです。

1.
    import { trigger, state, style, transition, animate } from '@angular/animations';
    Or 
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. Define the same in the import array in the root module.

エラーを解決します。ハッピーコーディング!!

これを試して

npm install @ angular / animations @ latest --save

'@ angular / platform-b​​rowser / animations'から{BrowserAnimationsModule}をインポートします。

これは私にとってはうまくいきます。

単に.. import {BrowserAnimationsModule} from '@ angular / platform-b​​rowser / animations';を追加します。

インポート：[.. BrowserAnimationsModule

]、

app.module.tsファイル内。

.. npm install @ angular / animations @ latest --saveがインストールされていることを確認してください

angularJS 4の更新：

エラー：（SystemJS）XHRエラー（404が見つかりません）http：// localhost：3000/node_modules/@angular/platform-b​​rowser/bundles/platform-b​​rowser.umd.js/animationsの読み込み

解決：

**cli:** (command/terminal)
npm install @angular/animations@latest --save

**systemjs.config.js** (edit file)
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

**app.module.ts** (edit file)
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  imports:      [ BrowserModule,BrowserAnimationsModule ],
...

--
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
---

@NgModule({
  declarations: [   --   ],
  imports: [BrowserAnimationsModule],
  providers: [],
  bootstrap: []
})