Angular2 - leveraging root-relative imports

Question

Angular2 - leveraging root-relative imports

Having trouble with imports in angular2/typescript? Want to use paths relative to the project root like 'app/components/calendar', but currently stuck using something like this:

//app/views/order/order-view.ts
import {Calendar} from '../../components/calendar

Where a Calendar is defined as:

//app/components/calendar.ts
export class Calendar {
}

The lower you go in hierarchy, the more cumbersome it gets. Is there a way to make paths relative to the project root?

I'm working in Visual Studio, and it seems like relative imports are the only way for VS to recognize these imports.

typescript angular

Answer 1

Answer №1

Solution

Starting from TypeScript 2.0, you have the ability to define baseUrl in the tsconfig.json file like this:

{
  "compilerOptions": {
    "baseUrl": "src"
}

This allows you to import components in a more convenient way, for example:

import { Button } from 'components/button';

Additional Information

Handling fallback paths

When using the baseUrl option, it's important to note that TypeScript will:

Attempt to resolve paths based on the baseUrl setting
If a module is not found, it will then consider the moduleResolution option

Configuration for SystemJS

For Angular projects utilizing SystemJS, make sure to adjust the configuration in systemjs.config.js to ensure paths are resolved correctly.

For more details and references, check out:

Answer 2

Solution

Starting from TypeScript 2.0, you have the ability to define baseUrl in the tsconfig.json file like this:

{
  "compilerOptions": {
    "baseUrl": "src"
}

This allows you to import components in a more convenient way, for example:

import { Button } from 'components/button';

Additional Information

Handling fallback paths

When using the baseUrl option, it's important to note that TypeScript will:

Attempt to resolve paths based on the baseUrl setting
If a module is not found, it will then consider the moduleResolution option

Configuration for SystemJS

For Angular projects utilizing SystemJS, make sure to adjust the configuration in systemjs.config.js to ensure paths are resolved correctly.

For more details and references, check out:

Answer 3

Answer №2

UPDATE

Avoid using this solution and instead embrace the node module resolution algorithm, as it is crucial for the community's stability. Using alternative methods may cause things to fall apart. Consider utilizing aliases or other suggested solutions.

Summarized Response Although there is a way, it is advisable not to proceed. Modify the compilerOption "moduleResolution" to "classic".

Detailed Explanation

If you are using tsconfig.json, chances are that you are facing challenges like transforming statements such as

import someModule = require ("../../../../someModule"

into

import someModule=require("src/path/to/someModule")

. After spending hours troubleshooting, I discovered that tsc might utilize different algorithms for module resolution. For instance, when working with Atom, the generated tsconfig.json had the compilerOption property moduleResolution set to "node", resulting in the utilization of node's less-than-desirable module resolution algorithm. By switching it to "classic," everything fell into place seamlessly.

Answer 4

UPDATE

Avoid using this solution and instead embrace the node module resolution algorithm, as it is crucial for the community's stability. Using alternative methods may cause things to fall apart. Consider utilizing aliases or other suggested solutions.

Summarized Response Although there is a way, it is advisable not to proceed. Modify the compilerOption "moduleResolution" to "classic".

Detailed Explanation

If you are using tsconfig.json, chances are that you are facing challenges like transforming statements such as

import someModule = require ("../../../../someModule"

into

import someModule=require("src/path/to/someModule")

. After spending hours troubleshooting, I discovered that tsc might utilize different algorithms for module resolution. For instance, when working with Atom, the generated tsconfig.json had the compilerOption property moduleResolution set to "node", resulting in the utilization of node's less-than-desirable module resolution algorithm. By switching it to "classic," everything fell into place seamlessly.

Answer 5

Answer №3

Essentially, in Angular 6, there's flexibility to begin the import either from the top or the bottom.

My Two Choices

These options come preconfigured with the default settings created by angular CLI.

Starting from the top:
This method is preferable when closer to the root of the application.
```
import { DateService } from "src/app/shared-services/context/date.service";
```

Commencing from the bottom

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

Context:

TypeScript configuration: 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

Answer 6

Essentially, in Angular 6, there's flexibility to begin the import either from the top or the bottom.

My Two Choices

These options come preconfigured with the default settings created by angular CLI.

Starting from the top:
This method is preferable when closer to the root of the application.
```
import { DateService } from "src/app/shared-services/context/date.service";
```

Commencing from the bottom

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

Context:

TypeScript configuration: 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

Answer 7

Answer №4

One method to simplify file management and bundling is to create export files with shorter paths.

For example, you could have a components.ts folder at the root of your application containing:

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

Then import them from components:

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

This approach is more suitable for exporting modules for external use rather than structuring a project.

Alternatively, you can avoid using import statements altogether by utilizing internal modules within your files.

In calendar.ts:

module Components {
    export class Calendar {}
}

Now you can easily use it in any of your project files like this:

new Components.Calendar();

Or import it with an alias:

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

Answer 8

One method to simplify file management and bundling is to create export files with shorter paths.

For example, you could have a components.ts folder at the root of your application containing:

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

Then import them from components:

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

This approach is more suitable for exporting modules for external use rather than structuring a project.

Alternatively, you can avoid using import statements altogether by utilizing internal modules within your files.

In calendar.ts:

module Components {
    export class Calendar {}
}

Now you can easily use it in any of your project files like this:

new Components.Calendar();

Or import it with an alias:

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

Answer 9

Answer №5

In summary: now you can effortlessly utilize src as the root directory and everything will function seamlessly.

When using Angular 2.0, executing ng new my-proj generates a file named my-proj/src/tsconfig.app.json. Within this file, there is a line defining baseUrl:

"baseUrl": "./",

As a result, no modifications are necessary to your configuration, allowing you to organize all imports starting from src. Assuming your project structure resembles:

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

you can import your files like so:

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

Note: Sublime Text does not recognize src/tsconfig.json, but only reads the primary tsconfig.json at the top level (refer to this issue). If experiencing Cannot find module 'app/...' errors in Sublime, include the following in your main tsconfig.json file:

"baseUrl": "./src",

This adjustment should resolve any import issues encountered within Sublime Text.

Answer 10

In summary: now you can effortlessly utilize src as the root directory and everything will function seamlessly.

When using Angular 2.0, executing ng new my-proj generates a file named my-proj/src/tsconfig.app.json. Within this file, there is a line defining baseUrl:

"baseUrl": "./",

As a result, no modifications are necessary to your configuration, allowing you to organize all imports starting from src. Assuming your project structure resembles:

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

you can import your files like so:

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

Note: Sublime Text does not recognize src/tsconfig.json, but only reads the primary tsconfig.json at the top level (refer to this issue). If experiencing Cannot find module 'app/...' errors in Sublime, include the following in your main tsconfig.json file:

"baseUrl": "./src",

This adjustment should resolve any import issues encountered within Sublime Text.

Answer 11

Answer №6

If you're working with a new Angular project created using Angular-CLI, there's no need to make any changes to the default configuration. This remains true as of version 6. To use root-relative imports, simply include src/ at the start of your import paths, like so:

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

This approach is preferable to another solution suggested by @MarekDulowski, as root-relative imports are easily distinguishable and can be globally identified through a search for "src/.

I came across this tip on Stack Overflow:

Answer 12

If you're working with a new Angular project created using Angular-CLI, there's no need to make any changes to the default configuration. This remains true as of version 6. To use root-relative imports, simply include src/ at the start of your import paths, like so:

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

This approach is preferable to another solution suggested by @MarekDulowski, as root-relative imports are easily distinguishable and can be globally identified through a search for "src/.

I came across this tip on Stack Overflow:

Angular2 - leveraging root-relative imports

Answer №1

Solution

Additional Information

Handling fallback paths

Configuration for SystemJS

Answer №2

UPDATE

Answer №3

My Two Choices

Context:

Answer №4

Answer №5

Answer №6

Similar questions

Looking to showcase a .tif image in your Angular project?

Eliminate the need for require statements in TypeScript-generated JavaScript files

Typescript compiler still processing lib files despite setting 'skipLibCheck' to true

Does property binding truly function as a one-way binding mechanism?

Issue Error: NG0201: NgControl provider not found within NodeInjector

What is the most effective way to condense these if statements?

Property referencing for change detection is a valuable technique

Issue with pre-selected default value in AngularJS TypeScript Kendo UI DropDownList

Angular 2 - resolving the access control allow origin header issue

The mat-select function is malfunctioning and failing to select any options

Tips for extracting year, month, and day from a date type in Typescript

Filter for the final item in Angular

How to store angular 2 table information generated using ngFor

The matInput directive is experiencing issues when used in a module that is loaded laz

Is it possible to deactivate the click event on an Angular mat table row?

Is it possible to denote two "any" as the same thing in a TypeScript function signature?

Is there a way to verify if a value is undefined before including it as an object field?

The user interface is not being refreshed in the select box after removing control from the reactive form

Encountering difficulties while trying to integrate a material view in Angular 6, facing the following error

Is subtyping causing issues in TypeScript's inheritance model?