【Ionic3】引入component.module.ts时报错提示cann't bind 'xxx'

通过命令创建一个名为 timeline 的组件：

ionic g component timeline

创建完成后目录如下：

├── components
│   └── timeline
│   │   └── timeline.html
│   │   └── timeline.scss
│   │   └── timeline.ts

└── components.module.ts

下面是详细代码

// timeline.ts
import { Component, Input } from '@angular/core';

@Component({
    selector: 'timeline',
    templateUrl: 'timeline.html'
})
export class TimelineComponent {
    @Input('endIcon') endIcon = "ionic";
    constructor() {}
}

@Component({
    selector: 'timeline-item',
    template: '<ng-content></ng-content>'
})
export class TimelineItemComponent {
    constructor() {}
}

@Component({
    selector: 'timeline-time',
    template: '<span>{{time.subtitle}}</span><span>{{time.title}}</span>'
})
export class TimelineTimeComponent {
    @Input('time') time = {};
    constructor() {}
}

// component.module.ts
import { IonicModule } from 'ionic-angular';
import { NgModule } from '@angular/core';
import { TimelineComponent, TimelineItemComponent, TimelineTimeComponent } from './timeline/timeline';

@NgModule({
    declarations: [TimelineComponent, TimelineItemComponent, TimelineTimeComponent],
    imports: [IonicModule],
    exports: [TimelineComponent, TimelineItemComponent, TimelineTimeComponent]
})
export class ComponentsModule {}

问题的关键 是当使用命令创建组件时自动生成的代码里缺少

import { IonicModule } from 'ionic-angular';
...

imports: [IonicModule],

加上即可。