Access JS created constant in TypeScript code

Question

I am new to TypeScript but trying to work out a way to manage my environment variables as I deploy and build through each. We are using gulp and I found gulp-ng-config. Issue with this is it writes out a js file but the rest of my site is written in TypeScript. So it creates this JS.

angular.module('myModule', []).constant('EnvironmentConfig', {"environment":"dev"});

In my TypeScript code I want to be able to access this constant but just cannot figure out how to. I read this post on SO and tried what is said there but no go.

Here is what I have done:

Created a TypeScript Interface for it:

export class IEnvironmentConfig {
environment: string
}

Imported and declared a variable in my service:

import EnvironmentConfig = require("../EnvironmentConfig"); 
declare var mEnviornmentConfig: EnvironmentConfig.IEnvironmentConfig;

Tried to use this variable in my service:

console.info(mEnviornmentConfig.environment);

So TypeScript does not complain now but when I run the code I get this error:

mEnviornmentConfig is not defined

What am I missing? The myModel is declare at the start of my app and does other module and controller configuration so I know it is getting registered.

I was not. Once I do that it "kind of works". By that I mean so long as I declare the constant as part of my main module I can get it. But that means the gulp task is not creating dynamically. When that constant gets put on a different module I now get --- Unknown provider: mEnvironmentConfigProvider <- mEnvironmentConfig <- PackageService — ToddB
– ToddB, Commented Nov 8, 2015 at 5:16

ToddB · Accepted Answer · 2015-11-08 06:40:51Z

1

Thanks to @keithm for getting me in the right direction.

Figured it out. Once I realized that injecting it into my main module was working my thought turned to how gulp is doing webpack. And sure enough the webpack was just skipping the .js file this other gulp package was creating. Once I updated webpack to account for this new file all was good.

answered Nov 8, 2015 at 6:40

ToddB

1,4841 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Atticus Over a year ago

Is there anything that you've found that gulp-ng-config could to better with for working with TypeScript? Happy to help introduce options. PS -- just realized you are the same person who left a comment on the blog, so, hello!

ToddB Over a year ago

Indeed @Atticus. Thanks for attention on this module. The real issue was two things 1) The plug saved out the file as .js 2) My app is written in TypeScript so the gulp process was looking for .ts files as the source. Maybe the ability to save as a TypeScript file or CoffeeScript etc?

Atticus Over a year ago

You could use gulp-rename and perform a .pipe(rename('config.ts')). Is the actual output valid for your TS implementation? I could look into adding options to configure the format and use a TS template. Same idea for CoffeeScript, ES6, etc.

Collectives™ on Stack Overflow

Access JS created constant in TypeScript code

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related