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


148

앵귤러 시드를 사용하여 Angular 4 프로젝트를 업그레이드했는데 오류가 발생합니다.

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

오류 스크린 샷

이 문제를 어떻게 해결할 수 있습니까? 오류 메시지가 정확히 무엇을 알려줍니까?


답변:


227

@angular/animations패키지가 설치되어 있는지 확인하십시오 (예 :) npm install @angular/animations. 그런 다음 app.module.ts에서

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

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

PC에 설치되어 있는지 어떻게 확인할 수 있습니까?
미스터 월드 와이드

2
npm list --depth=0프로젝트에 설치된 패키지 목록
Ploppy

1
이미 설치된 경우 예상되는 결과는 무엇입니까? 난 단지 2를 볼 수 있습니다 :├── @angular/platform-browser@4.3.5 ├── @angular/platform-browser-dynamic@4.3.5
미스터 월드 와이드

7
애니메이션 용 패키지를 모두 설치하고 AppModule에서 "BrowserAnimationsModule"을 가져 왔습니다. 그러나 여전히 오류가 발생합니다.
crossRT

1
@crossRT 다른 파일로 만든 애니메이션도 가져 왔습니까?
플로피

165

오류 메시지는 종종 잘못된 것 입니다.

을 가져 오는 것을 잊었을 수 있습니다BrowserAnimationsModule . 그러나 그것은 내 문제가 아니었다 . 모두가 해야하는 것처럼 BrowserAnimationsModule루트에서 가져 왔습니다 AppModule.

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

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

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


이전 버전의 Angular를 사용해야합니다. 오류가 다릅니다.Error: The provided animation trigger "myAnimation" has not been registered!
플로피

2
물론. 그러나 그 동안 갇혀 있고 위의 조언 만 찾는 사람들에게는 내 대답이 시도해야 할 한 가지 더 있습니다.
Ward

1
나는 또한 잘못된 오도 (각도 7.1 사용)를 받았습니다
Andi-lo

1
Angular 8.0.0을 사용하고 있는데 예외가 발생하지만 모든 것을 고쳤습니다.
Alireza 2016 년

1
@ Alireza와 마찬가지로 Angular 8.0에서도 동일한 오류가 발생했습니다. 구성 요소에 포함 된 애니메이션이 작동합니다.
trungk18

19

를 사용하려고 할 때 비슷한 문제가 발생했습니다 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 문제에 대한 솔루션 제공했습니다 .


2
이 정보를 주셔서 감사합니다 ... 이것은 Angular의 새로운 릴리스라는 점에 감사하지만 문제가 발생한 후에 문제를 해결하고 이러한 해결 방법을 우연히 해결하는 데 끝없는 투쟁처럼 느껴집니다. 사용자에게 친숙하지 않은 것들입니다.
Mike Gledhill

@ MikeGledhill Yup, 그들은 지난 1 년 동안 쉽게 업그레이드 할 수 있도록 완전히 빨랐습니다. 비참한 경험이었습니다.
잭슨 브레이

오늘 알았 듯이이 문제는 프로젝트가 각도 빠른 시작 시드를 기반으로하는 경우에만 발생합니다. 새로운 각도 cli는 이런 종류의 설정 파일을 사용하지 않습니다
wodzu

6

내가해야 할 일은 이것을 설치하는 것이 었습니다

npm install @angular/animations@latest --save  

그런 다음 가져 오기

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

당신에 app.module.ts파일.


-1; 이것은 대부분 두 달 전에 게시 된 승인 된 답변을 복제하지만 데코레이터 BrowserAnimationsModule에게 전달하는 단계를 @NgModule빠뜨립니다. 그것은의 에 거의 동일 vikvincer의 대답은 이전에 몇 시간을 기록했다.
Mark Amery

4
그것은 누군가의 대답의 사본이 아닙니다. 내 대답은 내가 한 일입니다. @NgModule 데코레이터는 정확합니다. 가상 동일은 결정적인 답변을 추가합니다. 너는 깃발을 쓸 필요가 없었다.
SamYah

6

저에게 @Component 데코레이터에서이 문장을 놓쳤습니다 : 애니메이션 : [yourAnimation]

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


실제로, 각도 문서 에 이것에 대한 페이지가 있습니다 . RTFM이 있어야합니다
Alexandre Germain

2

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

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

4.4.6으로 업그레이드하면 트릭을 수행하고 node_modules / @ angular / platform-browser 아래에 / animations 폴더를 추가했습니다.


또한 전체 Angular 프로젝트를 4.4.6으로 업그레이드했습니다.
Tanel Jõeäär

2

애니메이션 모듈을 설치 한 후 앱 폴더 내에 애니메이션 파일을 만듭니다.

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';

2

애니메이션은 특정 구성 요소에 적용되어야합니다.

EX : 다른 구성 요소에서 애니메이션 지시문을 사용하고 다른 구성 요소에서 제공합니다.

CompA --- @Component ({



애니메이션 : [애니메이션]}) CompA --- @Component ({



애니메이션 : [애니메이션] <=== 사용 된 구성 요소에 제공되어야 함})


1

나는 애니메이션 이름을 대괄호 안에 넣었 기 때문입니다.

<div [@animation]></div>

그러나 브래킷을 제거한 후 모든 것이 잘 작동했습니다 (Angular 9.0.1에서).

<div @animation></div>

0

오류가 발생했습니다 :

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.

오류가 해결됩니다. 행복한 코딩 !!


-3

이 시도

npm install @ angular / animations @ latest --save

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

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


-1; 이것은 대부분 두 달 전에 게시 된 승인 된 답변을 복제하지만 데코레이터 BrowserAnimationsModule에게 전달하는 단계를 @NgModule빠뜨립니다.
Mark Amery

-3

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

수입품 : [.. BrowserAnimationsModule

],

app.module.ts 파일에서.

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


이미 다른 답변이로드 된 내용을 복제하는 경우 -1입니다.
Mark Amery

-3

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 ],
...

2
-1; "angularJS 4"는 문제가 아니며 설명 문장만큼 오류 메시지와 읽기 어려운 코드 블록 만 제공하기 때문에 여기서 정확히 무엇을 표현하려고하는지 명확하지 않습니다.
Mark Amery

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

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

2
코드에 대한 설명을 입력하십시오. 자체적으로 코드를 게시해도 OP를 제외한 다른 사람에게는 도움이되지 않으며 코드가 작동하는 이유를 이해하지 못합니다.
jhpratt

이 코드 스 니펫은 문제를 해결할 수 있지만 질문에 왜 또는 어떻게 대답하는지는 설명하지 않습니다. 게시물의 품질을 향상시키는 데 도움이되는 코드에 대한 설명을 포함하십시오. 앞으로 독자들
에게이

-1; 이것은 허용 된 답변의 내용을 복제합니다.
Mark Amery
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.