[angular] '합성 속성 @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. 다음 단계는 내 문제를 해결했습니다.

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

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