답변:
@angular/animations
패키지가 설치되어 있는지 확인하십시오 (예 :) npm install @angular/animations
. 그런 다음 app.module.ts에서
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...,
imports: [
...,
BrowserAnimationsModule
],
...
})
npm list --depth=0
프로젝트에 설치된 패키지 목록
├── @angular/platform-browser@4.3.5 ├── @angular/platform-browser-dynamic@4.3.5
이 오류 메시지는 종종 잘못된 것 입니다.
을 가져 오는 것을 잊었을 수 있습니다BrowserAnimationsModule
. 그러나 그것은 내 문제가 아니었다 . 모두가 해야하는 것처럼 BrowserAnimationsModule
루트에서 가져 왔습니다 AppModule
.
문제는 모듈과 전혀 관련이없는 문제였습니다. *ngIf
구성 요소 템플릿에서 에 애니메이션을 적용 했지만 구성 요소 클래스에 대해 언급하지 않았습니다 .@Component.animations
@Component({
selector: '...',
templateUrl: './...',
animations: [myNgIfAnimation] // <-- Don't forget!
})
템플릿에서 애니메이션을 사용하는 경우 구성 요소의 animations
메타 데이터에 매번 애니메이션을 나열해야합니다 .
Error: The provided animation trigger "myAnimation" has not been registered!
를 사용하려고 할 때 비슷한 문제가 발생했습니다 BrowserAnimationsModule
. 다음 단계는 내 문제를 해결했습니다.
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
파일.
BrowserAnimationsModule
에게 전달하는 단계를 @NgModule
빠뜨립니다. 그것은의 도 에 거의 동일 vikvincer의 대답은 이전에 몇 시간을 기록했다.
저에게 @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 ({
애니메이션 : [애니메이션] <=== 사용 된 구성 요소에 제공되어야 함})
오류가 발생했습니다 :
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};
이것은 나를 위해 작동합니다.
BrowserAnimationsModule
에게 전달하는 단계를 @NgModule
빠뜨립니다.
'@ 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: []
})