Typescript can't find a module that has been mapped with SystemJS

Question

Typescript doesn't find the module in this import import ga from 'googleAnalytics';

SystemJS knows where to find the module, because it has been mapped up front like so:

map: {
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs',
    'underscore': 'node_modules/underscore/underscore-min.js',
    'googleAnalytics': '//www.google-analytics.com/analytics.js'
},

How can I provide similar mapping to the tsc?

This other question seems to point in a good direction: How to avoid imports with very long relative paths in Angular 2?

Typescript 2.0 seems to support the paths config for the tsconfig.json. Is there a way to download Typescript 2.0? Can I give the path config an http url (//www.google-analytics.com/analytics.js) like I'm doing with SystemJS? If there is no way to download Typescript 2.0, how can I achieve what I want with the current version?

Edit

The specific error I get is: "Cannot find module 'ga'".

Here is my tsconfig.json:

{
    "compilerOptions": {
        "rootDir": "./",
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true
    },
    "exclude": [
        "node_modules",
        "front-end/node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

I don't think Typescript 2 has been released yet. github.com/Microsoft/TypeScript/tags — user2486953
– user2486953, Commented May 9, 2016 at 23:59
what happens if you import it like this import {ga} from 'googleAnalytics'; — iberbeu
– iberbeu, Commented May 12, 2016 at 7:14
Same error. Whether I do import ga, import {ga} or import * doesn't matter, because it doesn't find the module googleAnalytics. The reason I get the error Cannot find module 'ga' is because @jasonszhao told me to rename googleAnalytics to ga (see the only answer below). I admit this is confusing! — Maxime Dupré
– Maxime Dupré, Commented May 12, 2016 at 19:09

score 1 · Accepted Answer · 2016-05-10 05:01:50Z

1

This problem can be worked around with Typescript Type Definitions.

To use the definition:

Put the type definition in your directory. Premade ones are provided by DefinitelyTyped.
Add this line to the .ts file that needs to import Google Analytics:
```
/// <reference path="ga.d.ts" />
```

Update

It did work for me when I ran tsc. Sorry I forgot to add:

Refactor to ga in your imports and SystemJS mapping.

This does not make the compiler know that it needs to check the SystemJS file, but just acts like a placeholder for the module that you import, so that no error is thrown and we can actually resolve the module during runtime with SystemJS.

edited May 10, 2016 at 5:01

answered May 10, 2016 at 1:26

user2486953

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

3 Comments

Maxime Dupré Over a year ago

I didn't think this would work, but I still tried it (and it didn't work). How is this d.ts file suppose to tell the tsc that to find the googleAnalytics module, it needs to look at the SystemJs mapping (or at least have the same mapping)? Maybe it doesn't need to know the mapping, but only find a corresponding d.ts file, but how would the tsc compiler link a custom module name such as googleAnalytics to ga.d.ts?

Maxime Dupré Over a year ago

It's still not working, maybe because the d.ts doesn't declare a module? github.com/DefinitelyTyped/DefinitelyTyped/blob/master/…

Maxime Dupré Over a year ago

I edited my question with the additional information.

Stanislav Šolc · Accepted Answer · 2016-05-15 21:14:57Z

0

i guess you understand that in case of typescript compilation transpiler is looking for definitly type files. He needs to know type definition of external module. I case you have active nodejs module resolution (you have) and you use a non-relative path (you do) you have to add to your project node_modules directory (maybe you already have one) and to this directory add googleAnalytics.d.ts file or you can create node_modules/googleAnalytics directory and then add there index.d.ts. Definition types for google analytics can be downloaded from DefintelyTyped repository

more info about module resolution here

EDIT: according your comment maybe you will have to add modul export to google definition file

declare module 'googleAnalytics' {
    export = UniversalAnalytics;
}

edited May 15, 2016 at 21:14

answered May 15, 2016 at 20:47

Stanislav Šolc

3054 silver badges9 bronze badges

3 Comments

Maxime Dupré Over a year ago

Manually creating a folder in node_modules is a very bad practice. You should rarely (if not never) have modify this folder. The typescript compiler also looks for ambiant module declarations, which is what @jasonszhao proposed, but it seems like the google analytics type definition doesn't export anything.

Stanislav Šolc Over a year ago

Excellent i didn't know it.

Maxime Dupré Over a year ago

As a follow up to your edit: you are right, but it would be export = ga instead of export = UniversalAnalytics . Cheers!

Collectives™ on Stack Overflow

Typescript can't find a module that has been mapped with SystemJS

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related