Angular 2 Module Paths

It took me a while to get my head around the module paths used when importing modules in Angular 2.

Maybe it was due to not enough caffeine, or maybe due to having an extended holiday without even touching a keyboard, let alone writing any code.

In any case this post is here to serve as an aide-memoir should I again decide to go on holiday or run out of coffee.

Here's what we are talking about:

import {Component, OnInit} from 'angular2/core';
import {Slide} from '../models/slide';
import {SlideService} from './ladderService';
import {SlideServiceData} from './data/slideServiceData';

Let's assume that these imports are used in another service called the snakesService and it is in a folder called services.

Furthermore let's assume the following folder structure:

Then let's take each import in turn.

import {Component, OnInit} from 'angular2/core'

This instructs the module loader to look for a global module. This module name angular2/core will have been mapped somewhere to the appropriate angular2 source file.
E.g. in config.js

map: {
    "angular2": "npm:angular2@2.0.0-beta.3",

I'm not sure yet where the mapping to core takes place...

import {Slide} from '../models/slide'

This instructs the module loader to look for the specified module one directory above the current directory. Note also that we DON'T specify the filename, but the module name - so there is no file extension.

i.e. load the module defined in: app/models/slide.ts

import {SlideService} from './ladderService'

This instructs the module loader to look for the specified module in the current directory.

i.e. load the module defined in: app/services/ladderService.ts

import {SlideServiceData} from './data/slideserviceData'

This instructs the module loader to look for the specified module in the directory named data that is within (a child of) the current directory.

i.e. load the module defined in: app/services/data/slideServiceData.ts