Relative paths using requirejs in combination with Typescript and AMD

6
votes

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?

2
requirejstypescriptrelative-pathamd
I've found that either absolute paths, or paths relative to the first module that require js loads (usually the root of my js app - either the Scripts folder or with Durandal the App folder - but not necessarily the root of my website) work. – Jude Fisher
Thanks a lot for the answer. If the first module is in /Scripts, baseUrl will be set to that path. Then if a module from "folder1" is used, regarding requirejs it has to be addressed like "folder1/blabla". What will you then write in the Typescript statement? Do you write module("folder1/blabla")? What if the module, where the import statement is written, is saved in "folder2"? Does Typescript then accept the module("folder1/blabla")? – mgs
Yes. As far as I can see the path doesn't change, wherever you import from (as long as you are still within the same application context - so still in the chain of modules loaded from that initial base url). – Jude Fisher

2 Answers

8
votes

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

2
votes

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...
    }
});