'Найдено синтетическое свойство @panelState. Пожалуйста, включите в приложение "BrowserAnimationsModule" или "NoopAnimationsModule".

Ответ 1

Убедитесь, что установлен пакет @angular/animations (например, запустив npm install @angular/animations). Затем в вашем app.module.ts

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

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

Ответ 2

Это сообщение об ошибке часто вводит в заблуждение.

Возможно, вы забыли импортировать BrowserAnimationsModule. Но это была не моя проблема. Я импортировал BrowserAnimationsModule в корневой AppModule, как и все остальные.

Проблема была в том, что совершенно не связано с модулем. Я анимировал *ngIf в шаблоне компонента, но я забыл упомянуть его в @Component.animations для класса компонента.

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

Если вы используете анимацию в шаблоне, вы также должны перечислять эту анимацию в метаданных animations компонента... каждый раз.

Ответ 3

У меня возникли аналогичные проблемы, когда я попытался использовать BrowserAnimationsModule. Следующие шаги решили мою проблему:

• Удалить node_modules dir
• Очистите кеш вашего пакета с помощью npm cache clean
• Запустите одну из этих двух команд, перечисленную здесь, чтобы обновить существующие пакеты.

Если вы испытываете 404 ошибки, например

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

добавьте следующие записи в map в system.config.js:

'@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.

Ответ 4

Все, что мне нужно было сделать, это установить этот

npm install @angular/[email protected] --save  

а затем импортируйте

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

в ваш app.module.ts файл.

Ответ 5

Для меня я пропустил это утверждение в @Component decorator: animations: [yourAnimation]

Как только я добавил это утверждение, ошибки исчезли. (Угловой 6.х)

Ответ 6

Моя проблема заключалась в том, что мой браузер @ angular/platform был на версии 2.3.1

npm install @angular/[email protected] --save

Обновление до 4.4.6 сделало трюк и добавленную/анимационную папку под node_modules/@angular/platform-browser

Ответ 7

После установки модуля анимации вы создаете файл анимации в папке вашего приложения.

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

Ответ 8

Я получил ниже ошибки:

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

Я следую принятому ответу Плоппи, и это решило мою проблему.

Вот шаги:

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.

Это решит ошибку. Удачного кодирования!

Ответ 9

Анимация должна быть применена к конкретному компоненту.

EX: Использование директивы анимации в другом компоненте и в другом.

CompA --- @Component ({

анимации: [анимация]}) CompA --- @Component ({

анимации: [анимация] <=== это должно быть предоставлено в используемом компоненте})

Ответ 10

в app.module.ts импортирует модуль import {BrowserAnimationsModule} из '@ angular/platform-browser/animations'

добавьте BrowserAnimationsModule в массив импорта, затем выполните команду npm. npm install '@ angular/animations' --save

Ответ 11

Попробуйте это

npm install @ angular/animations @latest --save

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

это работает для меня.

Ответ 12

в вашем любимом cmd

npm install @ angular/animations @latest --save

Гудлак

Ответ 13

Просто добавьте.. import {BrowserAnimationsModule} из '@ angular/platform-browser/animations';

импорт: [   ..   BrowserAnimationsModule

],

в файле app.module.ts.

убедитесь, что вы установили.. npm install @ angular/animations @latest --save

Ответ 14

Обновление для angularJS 4:

Ошибка: (SystemJS) Ошибка XHR (404 Не найдено) loading http://localhost:3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Решение:

**cli:** (command/terminal)
npm install @angular/[email protected] --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 ],
...

Ответ 15

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

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