Typescript / ES6: import src files with absolute path

Question

in one of my files i am importing another commonjs module with

import * as at from '../../../at-angular' 

I would prefer

 import * as at from 'fv/at-angular' 

with fv being my src . Thus, the folder structure of the application is as follows:

 - src - at-angular.ts - core - services .... 

Is there any way to enable typescript so that fv points to src ?

Answer 1

TypeScript 1.8 (not yet released) will have a route display function:

Path mappings

Sometimes modules are not directly below the base. this can be controlled by how locations are calculated in such cases using paths. Path mappings are specified using the following JSON structure:

 { "paths": { "pattern-1": "substitution" | ["list of substitutions"], "pattern-2": "substitution" | ["list of substitutions"], ... "pattern-N": "substitution" | ["list of substitutions"] } } 

Patterns and wildcards are strings that can have zero or one asteriks ('*'). Interpretation of both patterns and substitutions will be described in the Resolution Process section.

https://github.com/Microsoft/TypeScript/issues/5039

Perhaps this is what you are looking for.

Answer 2

I was able to get an absolute import path working on my webpack2 setup. Here is what I did. You need to configure tsconfig.json to support this. Here is an example: https://medium.com/@timwong/typescript-with-webpack2-how-to-do-import-with-absolute-path-f33b1826d330

Here is an example of my post.

Webpack2 Solution

 /** * Assuming the following project structure * /src * /app * /services * /models * /node_modules * .webpack.config.js * tsconfig.json */ var path = require('path'); module.exports = { module: { ... }, devtool: '...', resolve: { modules: [ path.resolve('./node_modules'), path.resolve('./app') ] } 

Having defined resol.modules, we recommend Webpack to search for (aka) components using these paths as the root folder. TypeScript Configuration

OK, now that Webpack is good to go; what about TypeScript. If you use an editor such as Atom or VSCode, you will most likely see a highlighted error stating that TypeScript cannot find the modules. This is because TypeScript is not aware of this root module setting. We must also provide this information in tsconfig.json.

 { "compilerOptions": { "baseUrl": ".", "paths": { "*": [ "*", "app/*" ] } } 

By defining the paths and baseUrl objects, we instruct the TypeScript compiler to search the application folder when resolving import statements. We hope that this simple example will help to unlock everyone who faces this configuration problem when we first start working with TypeScript and Webpack2.

Answer 3

I created an entity for the source code to use absolute path names or any other paths acting in tsconfig.json It works well with Browserify + Watchify + Tsify also works with Gulp - typescript.

https://gist.github.com/azarus/f369ee2ab0283ba0793b0ccf0e9ec590

It converts the path names and baseUrl defined in tsconfig.json to their relative path names. Enjoy it!

Answer 4

This is my setup and it works. Just compile, and when you want to run the code in your dist directory using the node, you must pass NODE_PATH = dist.

add this script to your package.json scripts and run it to verify that everything is working fine.

 "build-test": "NODE_PATH=dist node --inspect dist"