Module resolution in TypeScript
Module Resolution
You can import modules relatively
import {Something} from './Something'; import {Something} from '/Something'; import {Something} from '../bar/Something';
or Non-relatively:
import {Something} from 'mylibrary';
How does TypeScript find modules that you are referencing? Either via Classic
or Node
--moduleResolution
strategy. Classic
is the default when emitting AMD, System or ES2015 modules. Node is the default when emitting CommonJS or UMD modules.
Resolving Classic Relative Imports:
// assuming this file is /src/app/foo.ts import {Something} from './Something'; // will look in this order: /src/app/person.ts /src/app/person.d.ts
Resolving Classic Non-relative Imports:
// assuming this file is /src/app/foo.ts import {Something} from './Something'; // will look in this order: /src/app/person.ts /src/app/person.d.ts /src/person.ts /src/person.d.ts // continue searching up the directory tree
Resolving Node Relative resolution:
// assuming this file is /src/app/foo.ts import {Something} from 'person'; // will look in this order: // /src/app/person.ts // /src/app/person.tsx // /src/app/person.d.ts // /src/app/person/package.json (having a 'typings' property) // /src/app/index.ts // /src/app/index.tsx // /src/app/index.d.ts
Resolving Node Non-relative resolution:
// assuming this file is /src/app/foo.ts import {Something} from 'person'; // will look in this order: // /src/app/node_modules/person.ts // /src/app/node_modules/person.tsx // /src/app/node_modules/person.d.ts // /src/app/node_modules/person/package.json (having a 'typings' property) // /src/app/node_modules/index.ts // /src/app/node_modules/index.tsx // /src/app/node_modules/index.d.ts // now going up one directory but still looking in node_modules // /src/node_modules/person.ts // /src/node_modules/person.tsx // /src/node_modules/person.d.ts // /src/node_modules/person/package.json (having a 'typings' property) // /src/node_modules/index.ts // /src/node_modules/index.tsx // /src/node_modules/index.d.ts // continue searching up the directory tree
You can define a location that the compiler will look up when importing non-relative modules:
// tsconfig.json { "compilerOptions": { "baseUrl": "./modules" } }
You can also specify specific lookup locations for specific modules:
// tsconfig.json { "compilerOptions": { "paths": { "my_lib" : ["./customPath"] // relative to baseUrl if specified } } }
If you have source files located under several locations and you want to combine them, then you can use:
// tsconfig.json { "compilerOptions": { "rootDirs": [ "modules", "src", "ts/modules" ] } }
To troubleshoot module resolution:
// tsconfig.json { "compilerOptions": { "traceResolution": true } }