Import module from root path in TypeScript

user7536774 picture user7536774 · Feb 8, 2017 · Viewed 33.8k times · Source

Let's suppose I've a project, and its main source directory is:

C:\product\src

Based on this directory, every import path would be relative to it. I.e., suppose:

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '/com/name/product/thing';

same as:

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '../../../com/name/product/thing';

My entry compilation file would be at:

C:\product\src

for instance. So, is there a way to specify this such entry path (C:\product\src, for example) at the compiler options? I need to specify this in the tsconfig.json file, because I'll use webpack.

I've tried my above example, but TypeScript says the requested module cannot be found:

// Current script: A.ts

import { B } from '/com/B';


// Current script: B.ts

export const B = 0;

My tsconfig.json file (inside another project, but both similiar):

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}

Answer

user7536774 picture user7536774 · Feb 13, 2017

(Re-posting my answer to avoid puppy-socket.)

Using the compilerOptions.baseUrl property I was able to do the below import. This allowed me to have a complete root-to-expected-path, which helps my code maintainance, and works in any file, independently of the current folder. The below examples will have the src folder of my project as the modules root.

Important advice: this baseUrl property doesn't affect the entry webpack file (at least for me?), so separate a main file inside the src folder with this example, and run it from the entry (i.e., import { Main } from './src/Main'; new Main;), only once.

// browser: directory inside src;
//   * net: A TS file.
import { URLRequest } from 'browser/net';

tsconfig.json example:

{
    "compilerOptions": {
        "baseUrl": "./src",
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}

However, it won't directly work with webpack. The same thing must be done at the webpack options. This is how it worked in webpack 2:

module.exports = {
  ...
  , resolve: {
      ...
      , modules: [ path.join(__dirname, './src') ]
    }
}