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

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

Angular Seed를 사용하여 Angular 4 프로젝트를 업그레이드했는데 오류가 발생하였습니다.

가상 속성 @panelState를 찾았습니다.응용 프로그램에 "Browser Animations Module" 또는 "Noop Animations Module"을 포함하십시오.

어떻게 하면 고칠 수 있을까요?에러 메세지가 나타내는 것은 정확히 무엇입니까?

하세요.@angular/animations인스톨 를 들어, 「」를 실행해 ).npm install @angular/animations 다음module. application.module.ts application.ts app.module.ts.

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

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

이 에러 메세지는, 오해의 소지가 있습니다.

Import를 잊어버렸을 수 있습니다.BrowserAnimationsModule하지만 그건 내 문제가 아니었다.수입하고 있었습니다.BrowserAnimationsModuleAppModule모두가 그래야 하는 것처럼요.

모듈과는 전혀 관계가 없는 문제였습니다.는 anim니atingatingating의 을 만들고 .*ngIf 컴포넌트 템플릿에 기재되어 있습니다만, 컴포넌트 클래스의 에 기재하는@Component.animations 것을 잊었습니다.

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

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

비슷한 문제에 부딪혔어요.BrowserAnimationsModule를 해결했습니다 하다

1. node_modules dir 삭제
2. 를 하여 패키지 .npm cache clean
3. 여기에 나열된 두 명령 중 하나를 실행하여 기존 패키지를 업데이트합니다.

404 에러가 발생했을 경우는, 다음과 같습니다.

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

다음 을 추가하다mapsystem.config.config:

'@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 문제에 대한 해결책을 제시했습니다.

저는 @Component decorator: animations : [ your Animation ]에서 이 문장을 놓쳤습니다.

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

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

router.syslog.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.modulets에 애니메이션을 가져오는 것을 잊지 마십시오.

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

설치만 하면 됩니다.

npm install @angular/animations@latest --save  

다음으로 Import 합니다.

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

의 에 your에app.module.tsfilename을 클릭합니다.

애니메이션을 특정 구성 요소에 적용해야 합니다.

EX : 다른 컴포넌트 및 다른 컴포넌트에서 애니메이션 디렉티브를 사용합니다.

CompA --- @Component({)

---

---

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

---

---

animations : [ animations ]< === 이것은 사용된 컴포넌트로 제공되어야 합니다 }

문제는 @angular/platform-browser가 버전 2.3.1에 있다는 것이었습니다.

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

4.4.6으로 업그레이드하면 node_modules/@angular/platform-browser 아래에 /animations 폴더를 추가할 수 있습니다.

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

<div [@animation]></div>

그러나 브래킷을 분리한 후에는 모두 정상적으로 동작했습니다.

<div @animation></div>

아래 오류가 발생하였습니다.

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

Floppy가 수락한 답변을 따르자 문제가 해결되었습니다.

스텝은 다음과 같습니다.

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.

그러면 오류가 해결됩니다.해피 코딩!!

이를 위한 간단한 해결책은 느리게 로드된 모듈 또는 하위 모듈에서 BrowserAnimationsModule을 가져오지 말고 AppModule에서만 가져옵니다.컴포넌트 테스트 실행 중에 동일한 오류가 발생하면 테스트 베드의 Import 어레이에 추가합니다.참고. 이 기능은 정의된 애니메이션이 없을 때 사용할 수 있습니다.

이거 드셔보세요

npm install @syslog/animations@syslog --save

'@angular/platform-browser/animations'에서 {BrowserAnimationsModule}을(를) Import합니다.

난 이거면 돼

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

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

간단히 추가...'@angular/platform-browser/animations'에서 {BrowserAnimationsModule}을(를) Import합니다.

Import: [.. Browser Animations Module]

],

app.disc.ts 파일에 있습니다.

인스톨 되어 있는 것을 확인합니다.npm install @syslog/animations@syslog --save

angularJS 4에 대한 업데이트:

오류: (시스템)JS) http://localhost:3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/애니메이션 로드 중 XHR 오류(404 Not Found)

솔루션:

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

언급URL : https://stackoverflow.com/questions/43241193/found-the-synthetic-property-panelstate-please-include-either-browseranimati