How to get Visual Studio TypeScript and SystemJS to resolve absolute module paths the same way

Question

I’m learning how to manage modules in TypeScript 1.8.4 with SystemJS, using Visual Studio 2013 as the IDE.

Everything works if I use relative paths for importing modules:

Import { fooThing } from “../myThings/things/foo”;

SystemJS and Visual Studio both resolve the relative path to the same file location, so VS builds properly and can provide Intellisense on ‘importedThing’, and SystemJS can find the same file and the resulting JavaScript works properly in the browser.

However, relative paths are… well… relative. A reference to the same module will need a different path in .ts files that are in different folders. That’s no fun for maintenance.

In SystemJS I can use absolute module paths (i.e. paths that don’t start with ‘./’ or ‘../’), and provide a single central map for the absolute aliases in the System.config():

    System.config(
        {
            baseURL: "./myThings/",
            map: {
                "foo":  "things/foo",
                "bar": "differentThings/bar",
            }
        }
    )

… and then use an Import like this in any .ts file:

Import { fooThing } from “foo”;

If I decide to relocate the file that thingA is defined in, I just need to update the map for thingA in System.config({map}), not in every .ts file that imports from “thingA”.

However… Visual Studio TypeScript build doesn’t know anything about the System.config({map}), so it doesn’t know where to look for “foo”. The absolute paths in Import result in a ‘module not found’ build error. The only setup that seems to work for both VS TypeScript and SystemJS absolute module resolution is to put all the .ts files in the same folder… and that’s obviously not a viable solution for a large solution.

(I’m aware that in VS TypeScript resolves absolute import paths by walking up the parent folder chain: https://www.typescriptlang.org/docs/handbook/module-resolution.html. However, this doesn’t resemble how SystemJS resolves absolute paths.)

So – am I stuck with using relative module paths, or is there some way to get VS TypeScript and SystemJS absolute module resolution working together? Or is there a better approach to organising modules that I’m missing?

Rafe Rafe · Accepted Answer · 2016-07-27T21:43:55

afaik that map hash is only used for resolving the js files on the client-side. For importing things like '@angular/core', VS recognizes it because it looks inside the node_modules folder as part of its algorithm for finding modules. The happens because when you have "moduleResolution": "node" in your tsconfig.json file.

For importing your own components I believe it is best practice to use relative paths. Here's a good read on module resolution that should turn your crank: https://www.typescriptlang.org/docs/handbook/module-resolution.html

How to get Visual Studio TypeScript and SystemJS to resolve absolute module paths the same way

1 Answers