Import module from root path in TypeScript

Question

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 1

I needed to set both baseUrl and rootDir to point to my src folder in tsconfig.json { "compilerOptions": { "baseUrl": "./src", "rootDir": "./src", ... } I could then import .tsx files without needing a prefixed '/' or a relative path.

e.g. import BreadCrumb from 'components/BreadCrumb'

Answer 2

TypeScript imports use / at the start of a path to denote the root directory. To import a file relative to your current file either leave off the initial slash or use ./.

// Current script: C:\product\src\com\name\product\blah.ts
import { thing } from './com/name/product/thing';

By default the TypeScript compiler assumes the root of the project is the same as the location of your tsconfig.json.

You can specify a new root by specifying the rootDir property of the compilerOptions property in the tsconfig.

For a list of all available property settings consult the tsconfig definition found here.

Answer 3

(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') ]
    }
}

Answer 4

Solution for your import statement in thing.ts will be

import {} './product/blah'

and your project structure might be as

Other Possible options with explanation

---

I have the following application structure and I place it in

C:\\Users\\(username)\\Documents\firstAngular2App

as in the screenshot.

I am importing components to the app.module.ts as

1. ./ will show the current folder (app)

   import { } from './'; 
   

2. ../ will refer to the root folder (firstAngular2App-master)

   import { } from '../'; 
   

3. ../../ will refer to the root folder (Documents folder)

   import { } from '../../'; 
   

4. ../app/ refers to the app folder but it is referred from the root(firstAngular2App)

   import {} from '../app/';
   

Answer 5

Just for record

If you want use absolute import from your project, Do not use / as prefix, such as /src/config/cfg, just use as src/config/cfg

As https://stackoverflow.com/a/46229294/7529562 pointed, / stand for System root,

tsc will complain cannot find module