Inject Angular Constants in TypeScript

Question

I have converted my first angular factory to TypeScript in my project. I'm now trying to bring in the constants from a new typescript file.

Here is the typescript file that will eventually hold more than one constant value

module app.config {
     export class Constants {
         static get Default(): any {
             return {
                 apiServer: 'http://localhost/MyApplication'
             }
         }

     }

     angular
         .module('app');
 }

Here is the new TypeScript file where I'm trying to pull in the value of apiServer that used to be in a constants.config.js file

module app.services {
    interface IStoreFactory {
        apiServer: string;
    }

    var constant = new app.config.Constants.Default();

    export class StoreFactory implements IStoreFactory {

        static $inject = ['$http', '$log']
        constructor(private $http, $log) {
        }

        apiServer = constant.apiServer;

        getRegisters() {
            return this.$http.get(this.apiServer + 'stores/1/registers');
        }
    }

    angular
        .module('app.services')
        .service('storeFactory', StoreFactory);
 }

When I hard coded the value of apiServer in this service it worked fine. I'm getting the error that it:

cannot read property of 'Constants' of undefined.

What do I need to do to the app.config file to make it accessible in the app.services file?

Side note: Also it seems odd that there is a blank controller I'm sure that isn't being used correctly.

Radim Köhler · Accepted Answer · 2015-12-01 07:00:29Z

There are two issues.

I. syntax

The first is how to consume the above Constant declaration. There is a fully working adjusted example (click run in top right corner to see the result)

The most important is that we cannot use this:

var constant = new app.config.Constants.Default();

because we work with static getter. The syntax must be

var constant = app.config.Constants.Default;

complete example:

module app.config {
     export class Constants {
         static get Default(): any {
             return {
                 apiServer: 'http://localhost/MyApplication'
             }
         }
     }
//     angular...
}

module app.services {
    interface IStoreFactory {
        apiServer: string;
    }

    // wrong statement
    //var constant = new app.config.Constants.Default();
    // Constants is a property not method, and is NOT instance member
    var constant = app.config.Constants.Default;

    // just to be able to run this (click Run on the top-right)
    var div = document.createElement("DIV");
    div.innerText = constant.apiServer
    document.body.appendChild(div); 

    export class StoreFactory implements IStoreFactory {

        static $inject = ['$http', '$log']
        constructor(private $http, $log) {
        }    
        apiServer = constant.apiServer;    
        getRegisters() {
            return this.$http.get(this.apiServer + 'stores/1/registers');
        }
    }    
//    angular...
}

II. order of scripts loaded into page

Here is the broken example, which when run - will return this error:

TypeError: Cannot read property 'Constants' of undefined

The reason is - we must load all the related stuff in correct order. The below case shows that app.config is declared too late:

module app.services {
    interface IStoreFactory {
        apiServer: string;
    }
    try {
        var constant = app.config.Constants.Default;
    }
    catch(ex){
        // just to be able to run this (click Run on the top-right)
        var div = document.createElement("DIV");
        div.innerText = ex;
        document.body.appendChild(div);
    }   

    export class StoreFactory implements IStoreFactory {

        static $inject = ['$http', '$log']
        constructor(private $http, $log) {
        }

        apiServer = constant.apiServer;

        getRegisters() {
            return this.$http.get(this.apiServer + 'stores/1/registers');
        }
    }    
//    angular...
}    
// TOO late
module app.config {
     export class Constants {
         static get Default(): any {
             return {
                 apiServer: 'http://localhost/MyApplication'
             }
         }
     }
//     angular...
}

Great to see it helped ;) Enjoy the combination angular and Typescript

basarat · Accepted Answer · 2015-11-30 22:32:44Z

0

I'm getting the error that it cannot read property of 'Constants' of undefined

A common problem with namespaces (module keyword) and using out : https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

Fix : use external modules and a build tool like webpack / browserify.

answered Nov 30, 2015 at 22:32

basarat

278k60 gold badges475 silver badges528 bronze badges

2 Comments

Jon Harding Over a year ago

would you need to build the entire application after every change?

Jon Harding Over a year ago

also, I'm not using out as far as I can tell

Collectives™ on Stack Overflow

Inject Angular Constants in TypeScript

2 Answers 2

I. syntax

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

I. syntax

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related