Resolving a persistent AngularJS 1 constant problem with Typescript

I'm currently developing an application using TypeScript and AngularJS 1, and I've encountered a problem while trying to create a constant and passing it to another class. The constant in question is as follows:

module app{
       export class AUTH_EVENTS {
            static get Default():any {
                    return {
                    LOGIN_SUCCESS: 'AUTH_EVENTS:LOGIN_SUCCESS',
                    LOGIN_FAILED: 'AUTH_EVENTS:LOGIN_FAILED',
                    LOGOUT_SUCCESS: 'AUTH_EVENTS:LOGOUT_SUCCESS',
                    LOGOUT_FAILED: 'AUTH_EVENTS:LOGOUT_FAILED',
                    SESSION_TIMEOUT: 'AUTH_EVENTS:SESSION_TIMEOUT',
                    NOT_AUTHORIZED: 'AUTH_EVENTS:NOT_AUTHORIZED'
                };
            }
        }
 var myApp = getModule();
 myApp.constant("AUTH_EVENTS", AUTH_EVENTS.Default())
}

I'm attempting to access the constant here:

module app{
    class auth{

        constructor(public $q: ng.IQService,
            public $state:angular.ui.IState, 
            public AUTH_EVENTS: AUTH_EVENTS){
        }

             responseError(response:any) {
                if (response.status === 401) {
                    console.log(this.AUTH_EVENTS.LOGIN_SUCCESS);
                } 
                return this.$q.reject(response);
        }


    }
}

However, when I try to access

console.log(this.AUTH_EVENTS.LOGIN_SUCCESS) 

, I receive an error stating that LOGIN_SUCCESS is not defined.

Can anyone offer insight as to why this might be happening? Is there an issue with how the constant is defined or perhaps with the auth class itself? Specifically, this is the error message I get when compiling TS into JS:

error TS2339: Property 'LOGIN_SUCCESS' does not exist on type 'AUTH_EVENTS'.

Answer №1

Consider the following definition:

module app{ 
   export class AUTH_EVENTS {       
       LOGIN_SUCCESS= 'AUTH_EVENTS:LOGIN_SUCCESS';
       LOGIN_FAILED= 'AUTH_EVENTS:LOGIN_FAILED';
       LOGOUT_SUCCESS= 'AUTH_EVENTS:LOGOUT_SUCCESS';
       LOGOUT_FAILED= 'AUTH_EVENTS:LOGOUT_FAILED';
       SESSION_TIMEOUT= 'AUTH_EVENTS:SESSION_TIMEOUT';
       NOT_AUTHORIZED= 'AUTH_EVENTS:NOT_AUTHORIZED';
       static  Default() { return new AUTH_EVENTS(); }
    }
  var app = getModule();
  app.constant("AUTH_EVENTS", AUTH_EVENTS.Default())
}

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

Automatic browser refresh with the `bun dev` command

Currently experimenting with the latest bun platform (v0.1.6) in conjunction with Hono. Here are the steps I followed: bun create hono test-api cd test-api bun dev After running the server, the following message appears: $ bun dev [1.00ms] bun!! v0.1.6 ...

position the tooltip within the ample available space of a container in an angular environment

In my editor, users can create a banner and freely drag elements within it. Each element has a tooltip that should appear on hover, positioned on the side of the element with the most space (top, left, bottom, right). The tooltip should never extend outsid ...

Tips for correctly specifying the types when developing a wrapper hook for useQuery

I've encountered some difficulties while migrating my current react project to typescript, specifically with the useQuery wrappers that are already established. During the migration process, I came across this specific file: import { UseQueryOptions, ...

"Encountering an issue with ASP.NET MVC and Angular when making an AJAX call with multiple parameters, the HttpPostedFileBase

When sending an object and a file from my Angular service, the following code snippet is executed: $scope.addProject = function () { { var project = {}; project["Id"] = $scope.Id; project["ProjectCode"] = $scop ...

Executing invisible reCAPTCHA2 in Angular 6: A step-by-step guide

Recently, I have been trying to implement an invisible captcha into my website. In order to achieve this, I turned to the guidance provided by Enngage on their ngx-captcha GitHub page: https://github.com/Enngage/ngx-captcha While following the instruction ...

When the button is pressed, the TypeScript observable function will return a value

Check out the snippet of code I'm working with: removeAlert() : Observable<boolean> { Swal.fire({ title: 'delete this file ?', text: 'sth', icon: 'warning', showCancelButton: true, ...

Encountering a cloning error while using React Typescript and React Router DOM when calling props.history.push

When using props.history.push without passing state, everything works perfectly fine. However, when trying to pass data with state, an error occurs. The error message reads: DOMException: Failed to execute 'pushState' on 'History': func ...

Ionic 2: Image source not being updated

When working with Ionic 2, I encountered an issue where the src attribute of an <img> element was not updating inside the callback function of a plugin. Here is the template code: <img [src]="avatar_path" id="myimg" /> After using the Came ...

Identifying an Incorrect Function Call in a TypeScript Function from a JavaScript File [TypeScript, Vue.js, JavaScript]

I have a vue2 application and I am looking to incorporate TypeScript into some service files without modifying the existing js/vue files. To enable TypeScript support, I utilized vue-cli which allowed me to successfully add a myService.ts file containing ...

The given 'FC<ComponentType>' type argument cannot be assigned to the 'ForwardRefRenderFunction<unknown, ComponentType>' parameter type

Currently, I am using react in conjunction with typescript. Within my project, there are two components - one serving as the child and the other as the parent. I am passing a ref to my child component, and within that same child component, I am binding my ...

What is the best way to connect a ref to a stateless component in React?

I need help creating a stateless component with an input element that can be validated by the parent component. In my code snippet below, I'm facing an issue where the input ref is not being assigned to the parent's private _emailAddress propert ...

What is the reason behind Typescript's discomfort with utilizing a basic object as an interface containing exclusively optional properties?

Trying to create a mock for uirouter's StateService has been a bit challenging for me. This is what I have attempted: beforeEach(() => { stateService = jasmine.createSpyObj('StateService', ['go']) as StateService; } ... it(& ...

Why is the old state controller still being executed even though the state has already been changed successfully?

Let's consider a scenario with two states, State X and State Y. .state("X", { url:'/X', template: '<div></div>', controller: 'XCtrl', }).state("Y", { url:'/Y', template: '<div>& ...

A guide to testing the mui Modal onClose method

When using material UI (mui), the Modal component includes an onClose property, which triggers a callback when the component requests to be closed. This allows users to close the modal by clicking outside of its area. <Modal open={open} onCl ...

I am unable to invoke this function: TypeError: this.fetchData is not a function

Whenever I try to execute this.fetchData();, I encounter the error "TypeError: this.fetchData is not a function". Initially, I suspected that the context of 'this' was lost so I attempted using bind and arrow functions without success. How can I ...

Unreliable TypeScript errors when using spread arguments

Consider this function: function foo(a: number, b: number) {/* ... */} Error is triggered by Snippet 1: foo(1, ...[]); Expected 2 arguments, but received only 1. Error is triggered by Snippet 2: foo(1, 2, ...[]); Expected 2 arguments, but rece ...

The property slider in the d3 slider package is not found in the type 'types of d3'

I attempted to integrate a d3 slider into my d3 chart in Angular 2. I installed the d3slider package using the command: npm install --save @types/d3.slider. However, when trying to access the method "d3.slider()", an error occurred stating that "property ...

What sets apart ".. let i = index" from "..let i as index"?

Having recently delved into the world of Angular, I've been scouring YouTube for tutorials. While watching, I noticed some developers using ""let item of items; let i as index"" while others used ""let item of items; let i = index" ...

An issue occurred during the project compilation using npm

My project installation process is giving me some trouble. Initially, when I run npm install, it successfully installs all the dependencies. However, when I proceed to execute npm run compile, I encounter an error. Below is the log file for a better under ...

Techniques for adding data to an array using TypeScript

I am working on a project that involves creating a dynamic menu bar by fetching data from two different collections (supcat and cat) in order to combine them into a new array. However, I am encountering an issue with the push() method not working as expe ...