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

1. Видаліть nir_modules dir
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 зробило трюк та додало папку / анімації під 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%)' }))
            ])
        ]);
    }

Потім ви імпортуєте цей файл анімації на будь-який ваш компонент.

У файлі компонент.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>

Але після того, як я зняв кронштейн, все працювало нормально (У кутовій 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 встановити @ angular / animations @ latest - зберегти

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

це працює для мене.

Просто додайте .. імпорт {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: []
})