Chrillewoodz Chrillewoodz - 1 year ago 68
TypeScript Question

Angular 2 can you import something from the project root instead of having to go back using ../

I've found that I'm slowly digging my own grave, because the deeper my folder structure gets, the further back I must go each time I need to import a module from my root component:

import {ComponentsModule, SharedModule} from '../../../../../../shared';

Since that view also have child views then it will become even longer.

I looked at this question which suggests that this is not possible with Angular 2 as of now. Yet it seems so odd to me that there wouldn't be a way to achieve something like this instead:

import {ComponentsModule, SharedModule} from 'src/app/shared';

Is this a feature that will come in the future or is this already possible somehow?

EDIT: As per @Sasxa's suggestion I did this:

"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [

But now when I try to start Angular CLI I get a whole bunch of errors, main ones being these:
ERROR in Entry module not found: Error: Recursion in resolving
ERROR in multi main Module not found: Error: Recursion in resolving

Is something missing?

Answer Source

It seems this could be done with paths and baseUrl compiler options from tsconfig.json.

Here's an example from docs:

    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "*": [

This tells the compiler for any module import that matches the pattern "*" (i.e. all values), to look in two locations:

  • "*": meaning the same name unchanged, so map => \
  • "generated*" meaning the module name with an appended prefix “generated”, so map => \generated\

Should be available in TypeScript 1.9+


I just tried it: adding "baseUrl": "." allows me to import {...} from 'app/shared' anywhere in my app (my tsconfig.json is in the src\ folder). Compiles without any errors and works with Angular CLI.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download