title: How to import own components in Angular2?
body: <p>I have got this file structure:</p>
  
  <pre><code>├── components
  │   ├── home
  │   │   ├── home.component.html
  │   │   ├── home.component.js
  │   │   ├── home.component.js.map
  │   │   └── home.component.ts
  │   └── spendings
  │       ├── spendings.components.js
  │       ├── spendings.components.js.map
  │       └── spendings.components.ts
  ├── main.js
  ├── main.js.map
  └── main.ts
  </code></pre>
  
  <p><code>Spendings</code> component looks like this:</p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
      selector: 'spendings',
      template: 'This is text'
  })
  export class Spendings {
  }
  </code></pre>
  
  <p>I want to import <code>Spendings</code> to <code>Home</code>.
  So I put this line in <code>Home</code>:</p>
  
  <p><code>import {Spendings} from '../spendings/spendings.component';</code></p>
  
  <p>and of course: </p>
  
  <p><code>directives: [Spendings]</code> in a <code>Component</code> descriptor</p>
  
  <p><code>Home</code> eventually looks like this:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import {Spendings} from '../spendings/spendings.component';
  
  @Component({
      selector: 'home',
      templateUrl: './app/components/home/home.component.html',
      directives: [Spendings]
  })
  export class HomeComponent {
  }
  </code></pre>
  
  <p>As a result I get:</p>
  
  <p><code>error TS2307: Cannot find module '../spendings/spendings.component'.</code></p>
  
  <p>From what I've read import path is relative to the file that the import is added to. </p>
  
  <p>What am I doing wrong?</p>