Relative paths using requirejs in combination with Typescript and AMD

Question

There are several Javascript files, organized in folders Scripts/folder1, Scripts/folder2, ...

With requirejs.config.baseUrl a folder is defined as the default, for example Scripts/folder1. Then in requirejs.config.paths some files are addressed with just the filename, and some are addressed with a relative path (like ../folder2/blabla).

When coding the Typescipt file folder2/blabla.ts we need the module "math" from folder1. So we write

import MOD1 = module("../folder1/math");

Regarding Typescript, anything is fine with that. It can find the module. However, with requirejs there is a problem. It does not know the module "../folder1/math", it only knows "math".

The problem seems to be that the import statement expects a filename, being adressed by starting from the current directory. However, this isn't the module id that requirejs knows about.

Using absolute paths anywhere, both in the requirejs configuration and the import statement in Typescript, solves the problem.

Am I doing this wrong? Or are absolute paths the way to go?

Answer 1

Specify a baseUrl to be equivalent to the root folder of your Typescript files:

require.config({
    baseUrl: './scripts', 
 }
)

Then when you use relative paths starting from the scripts folder you can just do import like you normally do in typescript and requirejs will be using the same base path.

Update: This presentation should should answer all your url / using js from Typescript questions: http://www.youtube.com/watch?v=4AGQpv0MKsA with code : https://github.com/basarat/typescript-amd/blob/master/README.md

Answer 2

In you require configuration specify paths for each module. That should solve paths problem:

require.config({
    paths: {
        jquery: 'libs/jquery-1.7.1.min',
        jqueryui: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min'
        // Other modules...
    }
});