'প্যানেলস্টেটের সিনথেটিক সম্পত্তি পাওয়া গেছে। আপনার অ্যাপ্লিকেশনে দয়া করে "ব্রাউজারঅ্যানিমেশনস মোডুল" বা "নোপএনিমেশন মডেল" অন্তর্ভুক্ত করুন।

Question

আমি কৌণিক-বীজ ব্যবহার করে একটি কৌণিক 4 প্রকল্প আপগ্রেড করেছি এবং এখন ত্রুটি পেয়েছি

@ প্যানেলস্টেটের সিনথেটিক সম্পত্তি পাওয়া গেছে। আপনার অ্যাপ্লিকেশনে দয়া করে "ব্রাউজারঅ্যানিমেশনস মোডুল" বা "নোপএনিমেশনমডিউড" অন্তর্ভুক্ত করুন।

আমি এটা কিভাবে ঠিক করবো? ত্রুটি বার্তাটি আমাকে কী বলছে?

Comments

আমাকে সহায়তা করেছেন - github.com/mgechev/angular-seed/issues/1880

— FugWeb

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আপনার প্রকল্পে ইনস্টল করা প্যাকেজগুলি তালিকাভুক্ত করে

— প্লিপি

ইতিমধ্যে ইনস্টল করা হলে প্রত্যাশিত ফলাফল কি?? আমি কেবল এই 2 টি দেখতে পাচ্ছি:├── @angular/platform-browser@4.3.5 ├── @angular/platform-browser-dynamic@4.3.5

— মিঃ ওয়ার্ল্ড ওয়াইড

আমি অ্যানিমেশনের জন্য সমস্ত প্যাকেজ ইনস্টল করেছি এবং অ্যাপমোডিয়ুলে "ব্রাউজারঅ্যানিমেশনমডুল "ও আমদানি করেছি। তবে এটি এখনও ত্রুটি পেয়ে যাচ্ছে।

— ক্রসআরটিটি

@ ক্রসআরটিডিডি আপনি কি আপনার অ্যানিমেশনটি যদি অন্য কোনও ফাইলে তৈরি করেন তবে আমদানি করবেন?

— প্লিপি

Answer 2

এই ত্রুটি বার্তাটি প্রায়শই বিভ্রান্তিকর হয় ।

আপনি হয়ত আমদানি করতে ভুলে গেছেন BrowserAnimationsModule। তবে সেটা আমার সমস্যা ছিল না । আমি BrowserAnimationsModuleমূল AppModuleহিসাবে আমদানি করছিলাম , যেমন প্রত্যেকের করা উচিত।

সমস্যাটি মডিউলটির সাথে সম্পূর্ণ সম্পর্কিত নয় re আমি *ngIfউপাদান টেমপ্লেটে একটি অ্যানিমেট করছিলাম কিন্তু আমি উপাদান শ্রেণীর জন্য এটি উল্লেখ করতে ভুলে গিয়েছিলাম ।@Component.animations

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

আপনি যদি কোনও টেম্পলেটে কোনও অ্যানিমেশন ব্যবহার করেন তবে আপনাকে অবশ্যই সেই অ্যানিমেশনটি অবশ্যই উপাদানটির animationsমেটাডেটাতে প্রতিবার ... তালিকাবদ্ধ করতে হবে ।

Comments

আপনি অবশ্যই Error: The provided animation trigger "myAnimation" has not been registered!

— কৌণিকের

একেবারে। তবে ইতিমধ্যে, আমি যেমন আটকে ছিলাম এবং কেবলমাত্র উপরের পরামর্শটি পেয়েছি তাদের জন্য, আমার উত্তর আপনাকে আরও একটি জিনিস চেষ্টা করার সুযোগ দেয়।

— ওয়ার্ড

আমি সেই বিভ্রান্তিকর ত্রুটিটিও পেয়েছি (কৌণিক .1.১ ব্যবহার করে)

— অ্যান্ডি-লো

আমি কৌণিক 8.0.0 ব্যবহার করছি এবং সেই ব্যতিক্রমটি পেয়েছি তবে উপাদানটিতে অ্যানিমেশনটি সংজ্ঞায়িত করার সাথে সাথে আপনি সমস্ত কিছু স্থির করেছেন বলে ধন্যবাদ thanks

— আলিরিজা

@ অ্যালিরেজার সাথে একইভাবে, আমি কৌনিক 8.0 তেও একই ত্রুটি পেয়েছি। উপাদান কাজ অন্তর্ভুক্ত অ্যানিমেশন।

— trungk18

Answer 3

আমি অনুরূপ ইস্যুতে দৌড়েছি, যখন আমি এটি ব্যবহার করার চেষ্টা করেছি BrowserAnimationsModule। নিম্নলিখিত পদক্ষেপগুলি আমার সমস্যার সমাধান করেছে:

1. নোড_মডিউলস ডির মুছুন
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

এই তথ্যের জন্য ধন্যবাদ ... আমি প্রশংসা করি এটি কৌণিকের একটি নতুন প্রকাশ, তবে এটি ইস্যু পরে ইস্যুটি পেতে এবং এই জাতীয় কাজের আশেপাশে হোঁচট খাওয়ার মতো এক শেষ না হওয়া লড়াইয়ের মতো মনে হয়। এটি গুরুতরভাবে ব্যবহারকারী-বন্ধুত্বপূর্ণ জিনিস।

— মাইক গ্লেডহিল

মাইকগ্লেডহিল ইয়ুপ, তারা গত বছরের তুলনায় জিনিসগুলি আপগ্রেড করার পক্ষে সহজভাবে চুষেছে। এটি একটি দু: খজনক অভিজ্ঞতা হয়েছে।

— জ্যাকসন ব্রে

যেমনটি আমি আজ জানতে পেরেছি, এই সমস্যাটি কেবল তখনই ঘটে যদি আপনার প্রকল্পটি কৌনিক কুইকস্টার্ট বীজের উপর ভিত্তি করে থাকে। নতুন কৌণিক

— ক্লিপ

Answer 4

আমাকে যা করতে হয়েছিল তা হ'ল এটি ইনস্টল করা

npm install @angular/animations@latest --save  

এবং তারপরে আমদানি করুন

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

আপনার app.module.tsফাইলের মধ্যে

Comments

-1; এটি বেশিরভাগ মাস আগে গৃহীত উত্তরটির সদৃশ হয় যা বেশ কয়েকমাস আগে পোস্ট করা হয়েছিল, তবে BrowserAnimationsModuleএটি @NgModuleসাজসজ্জার কাছে যাওয়ার পদক্ষেপটিও বাদ দেয় । এটি কয়েক ঘন্টা আগে পোস্ট করা ভিকভান্সারের উত্তরের সাথে কার্যত অভিন্ন ।

— মার্ক অ্যামেরি

এটি কারও উত্তরের সদৃশ নয়। আমার উত্তর আমি কি করেছি। @NgModule ডেকরেটর ডিএফ সঠিক। ভার্চুয়াল অভিন্নটি চূড়ান্ত উত্তরে উত্তর যুক্ত করে guy আপনার পতাকা লাগানোর দরকার নেই।

— সাম্যাহ

Answer 5

আমার জন্য, আমি এই বিবরণটি কমপোনেন্ট ডেকরেটরটিতে মিস করেছি: অ্যানিমেশন: [আপনার অ্যানিমেশন]

একবার আমি এই বিবৃতিটি যুক্ত করলে ত্রুটিগুলি চলে যায়। (কৌণিক 6.x)

Comments

আসলে, কৌনিক ডকুমেন্টেশনে এটি সম্পর্কে একটি পৃষ্ঠা রয়েছে । আমার আরটিএফএম হওয়া উচিত

— আলেকজান্দার জার্মেই

Answer 6

আমার সমস্যাটি হ'ল আমার @ কৌনিক / প্ল্যাটফর্ম-ব্রাউজারটি সংস্করণ ২.৩.১ এ ছিল

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

4.4.6 এ আপগ্রেড করা কৌশলটি করেছে এবং নোড_মডিউলগুলি / @ কৌনিক / প্ল্যাটফর্ম-ব্রাউজারের অধীনে / অ্যানিমেশন ফোল্ডার যুক্ত করেছে

Comments

এবং এটি আমার সম্পূর্ণ কৌণিক প্রকল্পটি 4.4.6 এ আপগ্রেড করেও শেষ হয়েছিল

— ট্যানেল জেইর

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

তারপরে আপনি এই অ্যানিমেশন ফাইলটি আপনার যে কোনও উপাদানতে আমদানি করুন।

আপনার घटक.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';

Answer 8

অ্যানিমেশনটি নির্দিষ্ট উপাদানটিতে প্রয়োগ করা উচিত।

EX: অন্যান্য উপাদানগুলিতে অ্যানিমেশন নির্দেশিকা ব্যবহার করে এবং অন্যটিতে সরবরাহ করা।

কমপিএ --- @ কম্পোনেন্ট ({

---

---

অ্যানিমেশন: [অ্যানিমেশন] Comp) কমপিএ --- @ কম্পোনেন্ট ({

---

---

অ্যানিমেশন: [অ্যানিমেশন] <=== এটি ব্যবহৃত উপাদানগুলিতে সরবরাহ করা উচিত})

Answer 9

আমার জন্য ছিল কারণ আমি অ্যানিমেশনটির নাম বর্গাকার বন্ধনীগুলির ভিতরে রেখেছিলাম।

<div [@animation]></div>

তবে আমি বন্ধনী অপসারণের পরে সমস্ত ভাল কাজ করেছে (কৌণিক 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

এটা চেষ্টা কর

এনপিএম ইনস্টল করুন @ কৌণিক / অ্যানিমেশন @ সর্বশেষ - সেভ

'@ কৌণিক / প্ল্যাটফর্ম-ব্রাউজার / অ্যানিমেশন' থেকে import ব্রাউজারঅ্যানিমেশনস মোডুল} আমদানি করুন;

এটা আমার জন্য কাজ করে।

Comments

-1; এটি বেশিরভাগ মাস আগে গৃহীত উত্তরটির সদৃশ হয় যা বেশ কয়েকমাস আগে পোস্ট করা হয়েছিল, তবে BrowserAnimationsModuleএটি @NgModuleসাজসজ্জার কাছে যাওয়ার পদক্ষেপটিও বাদ দেয় ।

— মার্ক

Answer 12

'@ কৌণিক / প্ল্যাটফর্ম-ব্রাউজার / অ্যানিমেশন' থেকে সহজভাবে .. আমদানি করুন {ব্রাউজারঅ্যানিমেশনস মোডুল ule;

আমদানি: [.. ব্রাউজারঅ্যানিমেশনমডিউল

],

app.module.ts ফাইল এ।

আপনি ইনস্টল করেছেন তা নিশ্চিত করুন .. এনপিএম ইনস্টল করুন @ কৌণিক / অ্যানিমেশন @ সর্বশেষ - সেভ

Comments

ইতিমধ্যে অন্যান্য উত্তরের ভার এখানে থাকা নকল সামগ্রীটির জন্য -1।

— মার্ক

Answer 13

কৌণিক জেএস 4 এর জন্য আপডেট করুন:

ত্রুটি: (সিস্টেমজেএস) এক্সএইচআর ত্রুটি (404 পাওয়া যায় নি) লোড করা http: // লোকালহোস্ট: 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; "কৌণিক জেএস 4" কোনও জিনিস নয় এবং আপনি এখানে ঠিক কী প্রকাশ করার চেষ্টা করছেন তা অস্পষ্ট নয় যেহেতু আপনি কেবল একটি ত্রুটি বার্তা এবং একটি হার্ড-টু-পঠিত কোড ব্লক প্রদান করেছেন কারণ ব্যাখ্যাটির বাক্য হিসাবে এতটা ব্যতীত নয়।

— মার্ক

Answer 14

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

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

Comments

আপনার কোডের জন্য একটি ব্যাখ্যা প্রদান করুন। নিজস্ব কোড পোস্ট করা ওপি ব্যতীত কাউকে সহায়তা করে না এবং তারা বুঝতে পারে না কেন এটি কাজ করে (বা না)।

— jhpratt

যদিও এই কোড স্নিপেট সমস্যার সমাধান করতে পারে, এটি কেন বা কীভাবে প্রশ্নের উত্তর দেয় তা ব্যাখ্যা করে না। আপনার কোডটির জন্য একটি ব্যাখ্যা অন্তর্ভুক্ত করুন, কারণ এটি সত্যিই আপনার পোস্টের মান উন্নত করতে সহায়তা করে। মনে রাখবেন যে আপনি ভবিষ্যতে পাঠকদের জন্য প্রশ্নের উত্তর দিচ্ছেন, এবং সেই লোকেরা আপনার কোড পরামর্শের কারণগুলি জানেন না

— বালাগুরুনাথন মেরিমুথু

-1; এটি কেবল গৃহীত উত্তর থেকে সামগ্রীটিকে নকল করে।

— মার্ক অ্যামেরি