SystemJS relative paths

I have a very basic config.js file that works as expected, so long as it's deployed under the root URL. Here is the sample config.js file:

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
      app: "./src",
  },
  //packages defines our app package
  packages: {
    app: {
      main: './app.ts',
      defaultExtension: 'ts'
    }
  }
});

So long as this file is loaded from the root path <script src="/config.js"> and locations are
http://localhost/config.js and http://localhost/src/app.ts it all works fine.

I'm now trying to move the config.js file to a deeper directory and load it like: <script src="/a/b/c/d/e/config.js">, but if I do this I then need to hard-code the path on the config.js file itself like:

 //map tells the System loader where to look for things
  map: {
      app: "./a/b/c/d/e/src",
  },

Is it possible to not hard-code the entire path again in the config.js file ? I would have thought the leading ./ meant "relative to" but it doesn't. If I don't hard-code the full-path again it doesn't work. What is (or is there) a syntax to indicate relative location ?

Solution

'./' does mean relative but it is relative to the 'context' where your js file if loaded. I assume you are loading it in the page like index.html that resides in the root folder - that is your 'context' and all paths will be relative to it. Therefore by moving config.js to any other non root location and then loading it in the root html page - does not change its context that will still be the root folder, whereas location of the src files has changed and now you are forced into providing new paths to them in your config.js.

To make it easier you can use systemjs baseURL property. Then you will have to change path only in one place without need to rewrite them for each package.