'합성 속성 @panelState를 찾았습니다. 응용 프로그램에 "BrowserAnimationsModule"또는 "NoopAnimationsModule"을 포함하십시오. '

앵귤러 시드를 사용하여 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루트에서 가져 왔습니다 AppModule.

문제는 모듈과 전혀 관련이없는 문제였습니다. *ngIf구성 요소 템플릿에서 에 애니메이션을 적용 했지만 구성 요소 클래스에 대해 언급하지 않았습니다 .@Component.animations

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

템플릿에서 애니메이션을 사용하는 경우 구성 요소의 animations메타 데이터에 매번 애니메이션을 나열해야합니다 .

를 사용하려고 할 때 비슷한 문제가 발생했습니다 BrowserAnimationsModule. 다음 단계는 내 문제를 해결했습니다.

1. node_modules 디렉토리 삭제
2. 다음을 사용하여 패키지 캐시를 지우십시오. npm cache clean
3. 여기 에 나열된이 두 명령 중 하나를 실행 하여 기존 패키지를 업데이트하십시오.

다음과 같은 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]

이 문장을 추가하면 오류가 사라졌습니다. (각도 6.x)

내 문제는 내 @ angular / platform-browser가 버전 2.3.1에 있다는 것입니다.

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

4.4.6으로 업그레이드하면 트릭을 수행하고 node_modules / @ angular / platform-browser 아래에 / 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.

Ploppy의 답변을 받아 문제를 해결했습니다.

단계는 다음과 같습니다.

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-browser / animations'에서 import {BrowserAnimationsModule};

이것은 나를 위해 작동합니다.

'@ angular / platform-browser / animations'에서 import .. import {BrowserAnimationsModule};

수입품 : [.. BrowserAnimationsModule

],

app.module.ts 파일에서.

npm install @ angular / animations @ latest --save를 설치했는지 확인하십시오.

angularJS 4 업데이트 :

오류 : http : // localhost : 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations 로드 중 (SystemJS) XHR 오류 (404를 찾을 수 없음)

해결책:

**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: []
})