Angular2 & TypeScript importing of node_modules

by

The import rules of TypeScript follow the same convention as node.js. If an import begins with a dot:

import {Something} from './some/path';

Then it is treated as a relative path from the file that declares the import. If however it is an absolute path:

import {Component} from 'angular2/core';

Then it is assumed to be an external module, so Typescript will walk up the tree looking for a package.json file, then go into the node_modules folder, and find a folder with the same name as the import, then looks in the package.json of the module for the main .d.ts or .ts file, and then loads that, or will look for a file that has the same name as the one specified, or an index.d.ts or index.ts file.

Wow that seems complex when written out, and there are still some exceptions there… But all in all, if you have worked with node.js before then this should behave exactly the same way.

One thing to note is that there is a TypeScript compiler option that should be set for typing resolutions to work in this way

in tsconfig.json

"moduleResolution": "node"

Now the second part of your question was how does this get loaded without using ajax calls. This is a feature of System.js. The script tag that is loaded in the index.html file imports a bundle which registers the angular2 bundle with System. Once this has happened System knows about these files and correctly assigns them to their references. It’s a pretty deep topic but a lot of information can be found either in the README of systemjs, or systemjs-builder.

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. Angular 2 Sibling Component Communication
  4. Detect click outside Angular component
  5. Angular2 – should private variables be accessible in the template?
  6. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  7. Ionic 2 Form goes up when keyboard shows
  8. Angular 4 pass data between 2 not related components
  9. When to use square brackets [ ] in directives @Inputs and when not?
  10. Angular pass callback function to child component as @Input similar to AngularJS way
  11. Angular2 – Interaction between components using a service
  12. Reactive forms – disabled attribute
  13. How to implement sleep function in TypeScript?
  14. Testing error case with observables in services
  15. Build Angular2 HTML and TypeScript to a single file
  16. Filtering an array in angular2
  17. angular keyvalue pipe sort properties / iterate in order
  18. Integrating Material Design Lite with Angular2
  19. Angular – Make multiple HTTP calls sequentially
  20. @types/googlemaps/index.d.ts’ is not a module
  21. How can I declare a global variable in Angular 2 and up / Typescript? [closed]
  22. Angular 4+ using Google Analytics
  23. Merging http observables using forkjoin
  24. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  25. Plain Javascript as Angular 2 service
  26. What is pipe for in RxJS?
  27. How to create an Observable from static data similar to http one in Angular?
  28. How to check empty object in angular 2 template using *ngIf
  29. How to serve up images in Angular2?
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment