'सिंथेटिक संपत्ति @panelState मिला। कृपया अपने आवेदन में "BrowserAnimationsModule" या "NoopAnimationsModule" शामिल करें। '

Question

मैंने कोणीय-बीज का उपयोग करके एक कोणीय 4 परियोजना को अपग्रेड किया और अब त्रुटि मिलती है

सिंथेटिक संपत्ति @panelState मिला। कृपया अपने आवेदन में "BrowserAnimationsModule" या "NoopAnimationsModule" शामिल करें।

मैं इसे कैसे ठीक करूं? वास्तव में त्रुटि संदेश मुझे क्या बता रहा है?

Comments

मेरी मदद की - github.com/mgechev/angular-seed/issues/1880

— FugueWeb

Answer 1

सुनिश्चित करें कि @angular/animationsपैकेज स्थापित है (उदाहरण के लिए चल रहा है npm install @angular/animations)। फिर, अपने app.module.ts में

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

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

Comments

मैं कैसे जांच सकता हूं कि यह पीसी पर स्थापित है या नहीं?

— मिस्टर वर्ल्ड वाइड

npm list --depth=0आपके प्रोजेक्ट पर स्थापित पैकेजों को सूचीबद्ध करता है

— Ploppy

यदि पहले से स्थापित है तो अपेक्षित परिणाम क्या है।? मैं केवल इन 2 को देख सकता हूं:├── @angular/platform-browser@4.3.5 ├── @angular/platform-browser-dynamic@4.3.5

— मिस्टर वर्ल्ड वाइड

मैंने एनीमेशन के लिए सभी पैकेजों को स्थापित किया है और AppModule में "BrowserAnimationsModule" को भी आयात किया है। लेकिन यह अभी भी त्रुटि हो रही है।

— क्रॉस

@crossRTDid आप अपने एनीमेशन आयात अगर आप इसे एक अलग फ़ाइल में बनाया?

— Ploppy

Answer 2

यह त्रुटि संदेश अक्सर भ्रामक होता है ।

आप कर सकते हैं आयात करने के लिए भूल गए हैं BrowserAnimationsModule। लेकिन वह मेरी समस्या नहीं थी । मैं BrowserAnimationsModuleरूट में आयात कर रहा था AppModule, जैसा कि सभी को करना चाहिए।

समस्या कुछ पूरी तरह से मॉड्यूल से असंबंधित थी। मैं *ngIfघटक टेम्पलेट में एक एनिमेशन कर रहा था, लेकिन मैं घटक वर्ग के @Component.animations लिए इसका उल्लेख करना भूल गया था ।

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

यदि आप किसी टेम्प्लेट में एनीमेशन का उपयोग करते हैं, तो आपको हर बार घटक के animationsमेटाडेटा में उस एनीमेशन को सूचीबद्ध करना होगा ।

Comments

आप कोणीय के एक पुराने संस्करण का उपयोग कर रहे होंगे, त्रुटि अलग है:Error: The provided animation trigger "myAnimation" has not been registered!

— Ploppy

पूर्ण रूप से। लेकिन इस बीच, उन लोगों के लिए जैसे मैं था और ऊपर केवल सलाह पा रहा था, मेरा जवाब आपको कोशिश करने के लिए एक और चीज देता है।

— वार्ड

मुझे वह भ्रामक त्रुटि भी मिली (कोणीय 7.1 का उपयोग करते हुए)

— एंडी-लो

मैं कोणीय 8.0.0 का उपयोग कर रहा हूं और उस अपवाद को प्राप्त करता हूं लेकिन घटक में एनीमेशन को परिभाषित करते हुए जैसा कि आपने सब कुछ तय किया है, धन्यवाद।

— अलीरज़ा

@Aireireza के साथ भी, मुझे वही त्रुटि मिली है जो कि Angular 8.0 पर है। घटक कार्यों में शामिल एनिमेशन।

— trungk18

Answer 3

मैं इसी तरह के मुद्दों में भाग गया, जब मैंने उपयोग करने की कोशिश की BrowserAnimationsModule। निम्नलिखित चरणों ने मेरी समस्या हल कर दी:

1. नोड_मॉड्यूल्स को हटाएं 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 मुद्दे पर समाधान प्रदान किया ।

Comments

धन्यवाद यह गंभीरता से उपयोगकर्ता-अमित्र सामान है।

— माइक गल्डहिल

@ मायकेगल्डहिल यूप, वे निश्चित रूप से पिछले एक साल में चीजों को आसान बनाने के लिए पूरी तरह से चूसे हैं। यह एक दुखद अनुभव रहा है।

— जैक्सन ब्राई

जैसा कि मुझे आज पता चला है, यह समस्या केवल तब होती है जब आपकी परियोजना कोणीय क्विकस्टार्ट बीज पर आधारित होती है। नया कोणीय क्लि इस तरह की कॉन्फिग फाइल का इस्तेमाल नहीं करता है

— wodzu

Answer 4

मुझे बस यह स्थापित करना था

npm install @angular/animations@latest --save  

और फिर आयात करें

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

आपकी app.module.tsफ़ाइल में।

Comments

-1; यह ज्यादातर स्वीकृत उत्तर को दोहराता है जो कुछ महीने पहले पोस्ट किया गया था, लेकिन डेकोरेटर के पास BrowserAnimationsModuleजाने के कदम को याद करता है @NgModule। यह भी लगभग कुछ घंटे पहले पोस्ट किए गए विकविनर के उत्तर के समान है ।

— मार्क अमेरी

यह किसी के उत्तर की नकल नहीं है। मेरा जवाब है कि मैंने क्या किया। @NgModule डेकोरेटर सही है। वर्चुअल समसामयिक जवाबों को जोड़ता है मा यार। यू डोंट फ्लैग करने की जरूरत है।

— सामय्या

Answer 5

मेरे लिए, मैंने @Component डेकोरेटर में इस कथन को याद किया: एनिमेशन: [yourAnimation]

एक बार जब मैंने इस कथन को जोड़ा, तो त्रुटियां हो गईं। (कोणीय 6.x)

Comments

दरअसल, कोणीय प्रलेखन में इस बारे में एक पृष्ठ है । मुझे

— अलेक्जेंड्रे जर्मेन

Answer 6

मेरी समस्या यह थी कि मेरा @ कोणीय / प्लेटफ़ॉर्म-ब्राउज़र 2.3.1 संस्करण पर था

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

4.4.6 में अपग्रेड करते हुए नोड_मॉड्यूल / @ कोणीय / प्लेटफ़ॉर्म-ब्राउज़र के तहत ट्रिक और जोड़ा / एनिमेशन फोल्डर बनाया

Comments

और

— इसने

Answer 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%)' }))
            ])
        ]);
    }

फिर आप इस एनीमेशन फ़ाइल को अपने किसी भी घटक में आयात करते हैं।

अपने कंपोनेंट में। फाइल

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

Answer 8

एनीमेशन को विशिष्ट घटक पर लागू किया जाना चाहिए।

EX: अन्य घटक में एनीमेशन निर्देश का उपयोग करना और दूसरे में प्रदान किया गया।

कंपा --- @ कॉमपोनेंट ({

---

---

एनिमेशन: [एनिमेशन]}) कंपा --- @ कॉमपोनेंट ({

---

---

एनिमेशन: [एनीमेशन] <=== यह प्रयोग किए गए घटक में प्रदान किया जाना चाहिए})

Answer 9

मेरे लिए क्योंकि मैं वर्ग कोष्ठक के अंदर एनीमेशन नाम रखा था।

<div [@animation]></div>

लेकिन बाद में मैंने ब्रैकेट को हटा दिया तो सब ठीक हो गया (In Angular 9.0.1):

<div @animation></div>

Answer 10

मुझे त्रुटि मिली:

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.

यह त्रुटि को हल करेगा। हैप्पी कोडिंग !!

Answer 11

इसे इस्तेमाल करे

npm स्थापित करें @ कोणीय / एनिमेशन @ नवीनतम - सेव

आयात {BrowserAnimationsModule} '@ कोणीय / प्लेटफ़ॉर्म-ब्राउज़र / एनिमेशन' से;

यह मेरे लिए काम करता है।

Comments

-1; यह ज्यादातर स्वीकृत उत्तर को दोहराता है जो कुछ महीने पहले पोस्ट किया गया था, लेकिन डेकोरेटर के पास BrowserAnimationsModuleजाने के कदम को याद करता है @NgModule।

— मार्क अमेरी

Answer 12

सीधे शब्दों में .. '@ कोणीय / प्लेटफ़ॉर्म-ब्राउज़र / एनिमेशन' से {BrowserAnimationsModule} आयात करें;

आयात: [.. BrowserAnimationsModule

],

app.module.ts फ़ाइल में।

सुनिश्चित करें कि आपने स्थापित किया है .. npm स्थापित करें @ कोणीय / एनिमेशन @ नवीनतम- save

Comments

-1 सामग्री की नकल के लिए जो पहले से ही यहां अन्य उत्तरों के भार में है।

— मार्क अमेरी

Answer 13

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

Comments

-1; "angularJS 4" कोई बात नहीं है, और यह स्पष्ट नहीं है कि आप यहाँ व्यक्त करने की कोशिश कर रहे हैं, क्योंकि आप केवल एक त्रुटि संदेश और एक हार्ड-टू-रीड कोड ब्लॉक प्रदान करते हैं, ताकि स्पष्टीकरण के एक वाक्य के बिना।

— मार्क अमेरी

Answer 14

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

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

Comments

कृपया अपने कोड के लिए स्पष्टीकरण प्रदान करें। अपने आप पर कोड पोस्ट करने से ओपी को छोड़कर किसी की मदद नहीं होती है, और वे समझ नहीं पाते हैं कि यह काम क्यों करता है (या नहीं)।

— झपट्टा

हालांकि यह कोड स्निपेट समस्या को हल कर सकता है, यह इस बात की व्याख्या नहीं करता है कि यह प्रश्न का उत्तर क्यों या कैसे देता है। कृपया अपने कोड के लिए एक स्पष्टीकरण शामिल करें, क्योंकि यह वास्तव में आपके पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए सवाल का जवाब दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है

— बालगुनाथन मारीमुथु

-1; यह सिर्फ स्वीकृत उत्तर की सामग्री की नकल करता है।

— मार्क एमी