Import a module from the root path into TypeScript

Question

Suppose I have a project and its main source directory:

C:\product\src 

Based on this directory, each import path will relate to it. Ie, 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 compilation file will look like this:

 C:\product\src 

eg. So, is there a way to specify this input path ( C:\product\src , for example) in the compiler options? I need to specify this in the tsconfig.json file because I will use webpack.

I tried my example above, but TypeScript says the requested module was not 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 are alike):

 { "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

(Resend my answer to avoid the puppy socket.)

Using the compilerOptions.baseUrl property, I was able to import below. This allowed me to get the full path to the expected path, which helps maintain my code and works in any file regardless of the current folder. In the examples below, there will be the src folder of my project as the root of the modules.

Important tip: this baseUrl property does not affect the webpack file for writing (at least for me?), So separate the main file inside the src folder with this example and run it from the record (ie import { Main } from './src/Main'; new Main; ), only once.

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

Example tsconfig.json :

 { "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 will not work directly with webpack. The same thing needs to be done in the webpack settings. Here's how it works in webpack 2:

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

Answer 2

TypeScript import uses / at the beginning of the path to indicate the root directory. To import a file relative to your current file, either leave the leading forward 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 that the project root matches the location of your tsconfig.json.

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

For a list of all available property options, see the tsconfig definition found here .

Answer 3

The solution for your import statement in thing.ts will be

 import {} './product/blah' 

and your project structure may be like

Other Options Explained

---

I have the following application structure and I put it in

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

as in the screenshot.

I import components in app.module.ts as

• ./ will display the current folder (application)

   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 application folder, but it is passed from the root (firstAngular2App)

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

Answer 4

I needed to set both baseUrl and rootDir to specify my src folder in tsconfig.json { "compilerOptions": { "baseUrl": "./src", "rootDir": "./src", ... } Then I could import the .tsx files without the prefix '/' or relative path.

eg. import BreadCrumb from 'components/BreadCrumb'