Typescript declaration: why does this throw an error

Question

I'm just learning Typescript. I'm writing an Angular 2 app with typescript 2, using SystemJS 0.15.31 as my module loader.

I'd like to define app-wide constants. in one file, and import it in my components as needed. This is what I have:

root/systemjs.config.js

System.config({
    map:{
        'app': 'dist',
        'config': 'dist/config',
        ...
    }
});

root/dev/config.ts

export module Config {
    var version:string = '1';
}

root/dev/app/app.component.ts

import {Config} from 'config';
...
export class AppComponent {
    ...
    version = Config.version;
}

After transpilation to Javascript, the .ts files are put in dist/. However, the typescript compiler shows this error on the first line of app.component.ts and in the browser, AppComponent doesn't see Config.version

error TS2307: Cannot find module 'config'.

What's the problem with my syntax?

santi-elus · Accepted Answer · 2016-10-06 13:26:54Z

1

I think your problem is that SystemJS is expecting dist/config to be a folder.

Add an extension to the file path, like so:

map: {
    ...
    'config': 'dist/config.js' 
    ...
}

PS: export module is not typescript. I think you want:

export const Config = {
   ...
}

edited Oct 6, 2016 at 13:26

answered Oct 6, 2016 at 5:10

santi-elus

3102 silver badges13 bronze badges

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

5 Comments

BeetleJuice Over a year ago

Thank you. I made the change. The same error is thrown on the same import {Config} from 'config' line. If I change to use a relative path .. from '../config', things work without error. Problem is the relative path changes from file to file so it doesn't scale well. It's in order to have one fixed path that I used the SystemJS map option in the OP.

santi-elus Over a year ago

how about this new answer?

BeetleJuice Over a year ago

I'm sorry to say that it made no difference over your initial answer. SystemJS has no trouble finding the config file even when the path is missing the file extension: I know this because the version variable value is correctly imported in the component. However I get the same error as before from the typescript compiler

santi-elus Over a year ago

in your question is says that, in the browser, the component can't see config.version

BeetleJuice Over a year ago

Yes That was true when I opened the thread because my initial code was export module Config {... (see the OP). I then changed it to export var Config = {... and it started to work in the browser. I then modified your suggestion to use export const Config = {... (your code as it's currently written doesn't compile at all: export const Config {...). So things work in the browser, but the typescript compiler throws the same error from the OP

Collectives™ on Stack Overflow

Typescript declaration: why does this throw an error

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related