Angular2 – root relative imports

by

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

More Related Contents:

  1. Expression ___ has changed after it was checked
  2. Angular 2 custom form input
  3. Angular 2 – Return data directly from an Observable
  4. How to return value from function which has Observable subscription inside?
  5. How do I actually deploy an Angular 2 + Typescript + systemjs app?
  6. Define global constants
  7. How to use moment.js library in angular 2 typescript app?
  8. Chaining RxJS Observables from http data in Angular2 with TypeScript
  9. How can I declare a global variable in Angular 2 / Typescript? [closed]
  10. Angular 2: Convert Observable to Promise
  11. Angular2 – should private variables be accessible in the template?
  12. How to prepare release version with SystemJS and Gulp?
  13. Angular2 canActivate() calling async function
  14. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  15. How do you deploy Angular apps?
  16. Angular2 – Http POST request parameters
  17. Angular 2 View will not update after variable change in subscribe
  18. Angular2 handling http response
  19. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  20. angular2 bootstrap with data from ajax call(s)
  21. Integrating Material Design Lite with Angular2
  22. How to use select/option/NgFor on an array of objects in Angular2 [duplicate]
  23. How can I declare a global variable in Angular 2 and up / Typescript? [closed]
  24. How to implement Custom Async Validator in Angular2/4/5
  25. Import gapi.auth2 in angular 2 typescript
  26. Angular 2 loader on each http request
  27. detect change of nested property for component input
  28. What exactly $event object do in Angular 2?
  29. How to place a dynamic component in a container
  30. Access Meta-Annotation inside Class (TypeScript)

Leave a Comment