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

Я обновил проект Angular 4 с помощью angular-seed и теперь получаю ошибку

Нашел синтетическое свойство @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. Следующие шаги решили мою проблему:

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

Если вы испытываете 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 .

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

npm install @angular/animations@latest --save  

а затем импортировать

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

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

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

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

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

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

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

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

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 ({

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

Для меня это было потому, что я поместил название анимации в квадратные скобки.

<div [@animation]></div>

Но после того, как я снял кронштейн, все заработало нормально (в Angular 9.0.1):

<div @animation></div>

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

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.

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

Попробуй это

npm install @ angular / animations @ latest --save

импортировать {BrowserAnimationsModule} из '@ angular / platform-browser / animations';

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

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

импорт: [.. BrowserAnimationsModule

],

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

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

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

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

Решение:

**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: []
})