In my journey to master module management in TypeScript 1.8.4 with SystemJS, I rely on Visual Studio 2013 as my trusty IDE.
Things flow smoothly when I stick to relative paths for importing modules:
Import { fooThing } from “../myThings/things/foo”;
Both SystemJS and Visual Studio effortlessly resolve the relative path to the correct file location, allowing VS to build seamlessly and provide Intellisense on ‘importedThing’, while SystemJS can locate the same file resulting in flawless JavaScript execution in the browser.
However, dealing with relative paths can be a bit of a hassle. The same module referenced in different folders will require varying paths in .ts files, which can make maintenance more challenging.
An alternative solution in SystemJS is utilizing absolute module paths (paths not starting with ‘./’ or ‘../’), and establishing a centralized map for absolute aliases within System.config():
System.config(
{
baseURL: "./myThings/",
map: {
"foo": "things/foo",
"bar": "differentThings/bar",
}
}
)
…followed by using an Import statement like this in any .ts file:
Import { fooThing } from “foo”;
If the location of the file where 'thingA' is defined needs to be changed, simply updating the map for thingA in System.config({map}) suffices, without needing adjustments in every .ts file that imports from “thingA”.
However… Visual Studio TypeScript build doesn’t recognize the System.config({map}), leaving it clueless about where to look for “foo”. This leads to a 'module not found' error due to the absolute paths in Imports. The only setup that seems to work for both VS TypeScript and SystemJS for absolute module resolution is consolidating all .ts files in the same folder – clearly not ideal for larger projects.
(I understand that in VS TypeScript resolves absolute import paths by navigating up the parent folder chain: https://www.typescriptlang.org/docs/handbook/module-resolution.html. However, this differs from how SystemJS handles absolute paths.)
So – do I have no choice but to stick with relative module paths, or is there a way to align VS TypeScript and SystemJS for absolute module resolution? Perhaps there's a better approach to organizing modules that has eluded me?