如何在Angular2中導入自己的組件？

Question

我有這個文件結構：

├── 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

Spendings部分如下所示：

import { Component } from '@angular/core';
@Component({
    selector: 'spendings',
    template: 'This is text'
})
export class Spendings {
}

我想將“ Spendings導入“ Home 。 所以我把這行放在Home ：

import {Spendings} from '../spendings/spendings.component';

而且當然：

directives: [Spendings] Component描述符中的directives: [Spendings]

Home最終看起來像這樣：

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 {
}

結果，我得到：

error TS2307: Cannot find module '../spendings/spendings.component'.

從我所讀的內容中，導入路徑是相對於導入添加到的文件的。

我究竟做錯了什么？

Answer 1

將您的文件spendings.components.ts重命名為spendings.component.ts