Mastering Ember with Typescript - crafting action definitions

Trying to set up my first Ember app using TypeScript, I'm facing issues with defining actions. Most tutorials suggest using the @action decorator like this:

import { action } from '@ember-decorators/object';

@action sayHello(){
}

However, I keep encountering an error:

Module '"../../../node_modules/@ember-decorators/object"' does not have an exported member 'action'.

In my package.json, I have specified:

"ember-decorators": "^6.0.0",

Could someone please point out what I might be missing?

Appreciate any help.

typescriptember.js

Answer №1

The use of the @action decorator in ember-decorators v6 has been phased out because it is now included in Ember starting from v3.10 beta.

To resolve this issue, you have two options: either downgrade your ember-decorators to v5.1 to align with the current version of Ember, or upgrade Ember to at least 3.10-beta.

If upgrading Ember is your choice, the new method for importing the action decorator is 

import { action } from '@ember/object';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to log in with password after hashing using React, NodeJS, and mySQL

I've implemented a salt and hash function to secure my password. Strange thing is, I can't log in using the original password, but it works when I use the hashed password from the database. Salt: "HashedPasswordCheck" Hash Function: function has ...

mysqlnode.jsreactjstypescriptredux

Swap out a collection of objects for a different collection of objects

I need to replace the content of array1 with the content of another array2 while keeping the same references and indexes in array1: let array1 = [ { book : { id : 2, authorId : 3} } , { book : { id : 3, authorId : 3} }, { book : { id : 4, authorId : ...

angulartypescript

Are there any methods to incorporate Facebook and Google login into an Ionic progressive web app (PWA)?

After successfully developing an app in Ionic 3 for Android and iOS, I encountered a problem when adding the browser platform. The Facebook and Google login features were not functioning as expected. Despite the assurance from Ionic documentation that the ...

facebookangulartypescriptgoogle-plusionic3

Is it possible to view the original source code by simply clicking ctrl + click?

Currently, I am working on a project involving TypeScript and Angular, utilizing the library Spartacus. Often times, I find myself needing to reference the source code. This is how I currently go about it: I come across StateUtil from @spartacus/core, th ...

typescriptvisual-studio-code

Leveraging a shared library in Typescript

How can I efficiently share code between different codebases that are all written in TypeScript and constantly being developed? I am seeking a straightforward solution. Some of the methods I have attempted include: 1 Utilizing import statements with path ...

gittypescriptnpm

Is there a specific side effect that warrants creating a new Subscription?

Recently, I had a discussion on Stack Overflow regarding RxJS and the best approach for handling subscriptions in a reactive application. The debate was whether it's better to create a subscription for each specific side effect or minimize subscriptio ...

javascriptangulartypescriptrxjsreactive-programming

Connect the keys from one enum to either keys or values in another enum

When working with the code below, it is important that the keys of PropertiesNamesInDataBase align with those in User.Keys. While the values of PropertiesNamesInDataBase are used in the backend, it is crucial for uniformity that the names match in the fron ...

typescriptenums

Enable the acceptance of various validator patterns within Angular Material 2

I'm using md-error in angular material to validate user inputs from the client side. Currently, I am trying to validate an input field that accepts two types of patterns: Pattern 1: Accept the first 9 characters as numbers followed by the 10th ch ...

angularjsvalidationtypescriptangular-material

Examining the array to ensure the object exists before making any updates in the redux

Is there a way to determine if an object exists in an array and update it accordingly? I attempted to use the find method, but it couldn't locate the specified object. I also tried includes, but it seems to be unable to recognize the item within the ...

reactjstypescriptredux

Personalized angular subscription malfunction

Recently, as I dive into learning Angular 6, a question has arisen regarding the subscribe method and error handling. A typical use of the subscribe function on an observable typically appears like this: this.myService.myFunction(this.myArg).subscribe( ...

angulartypescripthttp

How to extract the first initials from a full name using Angular TypeScript and *ngFor

I am new to Angular and still learning about its functionalities. Currently, I am developing an Angular app where I need to display a list of people. In case there is no picture available for a person, I want to show the first letters of their first name a ...

angulartypescript

Can a library be developed that works with both Java and JavaScript/TypeScript?

I specialize in Angular development. Our front- and backend both contain specialized calculation methods that work like magic. Although the classes are the same, any bugs found in the calculations have to be fixed separately in two different projects. Is ...

javascriptjavatypescriptmavennpm

Ways to specify the T (Generic type) associated with the class

I am working with a class that uses a generic type like this: SomeGenericClass<T>{ constructor(){ } } Within some of the functions, I log messages and want to refer to the current type T of the generic class in my logs. I have attempted t ...

genericstypescriptinstances

Using typescript, we can pass a generic class as a parameter to a function

Currently, I am faced with the challenge of passing a class reference as a function parameter, and then calling a static method on this particular class. Additionally, there is a possibility that in the future, I may need to instantiate the class and inclu ...

typescripttypescript2.0

Webpack and typescript are encountering a critical dependency issue where the require function is being utilized in a manner that prevents static extraction of dependencies

Having recently started diving into typescript and webpack programming, I must admit that my background in this area is limited. Despite searching through similar questions on Stack Overflow, none of the solutions provided so far have resolved my issue: I ...

typescriptwebpack

Ensure all promises are resolved inside of for loops before moving on to the next

Within my angular 11 component, I have a process that iterates through elements on a page and converts them from HTML to canvas to images, which are then appended to a form. The problem I am encountering is that the promise always resolves after the ' ...

angulartypescriptfor-loopasync-awaitpromise

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

javascriptangulartypescriptwebpack

Encountering a TypeScript error within the queryFn while implementing Supabase authentication alongside React Toolkit Query

I've been attempting to integrate Supabase authentication with React Toolkit Query but encountering an issue with the utilization of the queryFn. Here is the code snippet that employs supabase.auth.signUp to register a user using email/password. You ...

reactjstypescriptreact-typescriptrtk-querysupabase-js

The minimum and maximum validation functions are triggered when I am not utilizing array controls, but they do not seem to work when I use array controls

Take a look at the stack blitz example where min and max validation is triggered: https://stackblitz.com/edit/angular-mat-form-field-icrmfw However, in the following stack blitz with an array of the same controls, the validation does not seem to be worki ...

javascripthtmlangulartypescriptangular8

Angular form requests can utilize the Spring Security Jwt Token to allow all options methods

Despite checking numerous sources online, I am facing a persistent issue with my Angular application. The problem arises when using HttpClient along with an Angular interceptor to set headers for authentication in my Java Rest API using JWT tokens. The int ...

angularspringtypescriptspring-bootspring-security