Answer

As of TypeScript 2.0 you can set tsconfig.json properties baseUrl as following:

{ "compilerOptions": { "baseUrl": "app" } 

Then, you might use your desired manner of importing components, like:

import { Calendar } from 'components/calendar'; 

Appendix

Fallback paths resolution

An important consideration is that specifying baseUrl option causes TypeScript compilator to:

1. Look up a path with regards to baseUrl
2. On failed resolution (module not found), look up a path with regards to moduleResolution option

SystemJS

Since SystemJS is heavily used in Angular development stage, be sure to accordingly config also systemjs.config.js, so that it resolves paths correctly.

Source and further details: https://github.com/Microsoft/TypeScript/issues/5039

Basically, in Angular 6 you can start the import from the top or bottom.

My two options

They are available with default config generated by angular CLI

1. From the top
   I prefer this way if it's closer from the root of the app

   import { DateService } from "src/app/shared-services/context/date.service";

2. From the bottom

   import { DateService } from "../../../../../../../shared-services/context/date.service";

Context:

TypeScript config: tsconfig.json

{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } } 

Angular's stack

ng -v

Angular CLI: 6.0.8 Node: 8.9.0 OS: win32 x64 Angular: 6.0.7 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router Package Version ----------------------------------------------------------- @angular-devkit/architect 0.6.8 @angular-devkit/build-angular 0.6.8 @angular-devkit/build-optimizer 0.6.8 @angular-devkit/core 0.6.8 @angular-devkit/schematics 0.6.8 @angular/cli 6.0.8 @ngtools/webpack 6.0.8 @schematics/angular 0.6.8 @schematics/update 0.6.8 rxjs 6.2.1 typescript 2.7.2 webpack 4.8.3 

One way would be to have files that re export and bundle the files with a shorter path.

You could have a components.ts folder in the root of your application with.

export {Calendar} from './components/calendar' export {*} from './components/map' 

And importing it from components

import {Calendar, Map} from '../../components'; 

This however will is better suited to exporting modules so others can use them, than the way to structure a project.

The alternative would be to forgo the use of import statements and use internal modules instead.

calendar.ts

module Components { export class Calendar {} } 

And you will be able to just use it in any of the files in your projects like this.

new Components.Calendar(); 

Or import it with an alias.

import Calendar = Components.Calendar; new Calendar(); 

Tl;dr: you should now be able to use src as the root and it will "just work".

With Angular 2.0, when you run ng new my-proj, it auto-creates a file my-proj/src/tsconfig.app.json. This file contains a baseUrl line:

"baseUrl": "./", 

Thus, you shouldn't have to change anything about your config and you can scope all of your imports rooted on src. Assuming your project structure looks something like:

my-proj/ README.md src/ app/ sidebar/ sidebar.component.ts user.service.ts 

you can import your files with:

import { Sidebar } from 'app/sidebar/sidebar.component'; import { UserService } from 'app/user.service'; 

Edited to add: Sublime does not read src/tsconfig.json, though, it only reads the top-level tsconfig.json (see this issue). If you're getting Cannot find module 'app/...' errors on your import lines in Sublime, you can add:

"baseUrl": "./src", 

to your top-level tsconfig.json file.

You don't need to change anything from the default configuration of a new Angular project generated from Angular-CLI. Not sure about previous versions, but as of version 6, I know this is true. To do a root-relative import, you use src/ at the beginning of your imports like:

import { VideoPlayerComponent } from 'src/app/pages/shared/video-player/video-player.component'; 

This a better solution than @MarekDulowski's answer, because root-relative imports can be easily identifiable and easily found/searched for globally by querying "src/.

I learned this from the solution here: https://stackoverflow.com/a/51582699/1253298