如何在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

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