Angular 角度2：组件不是任何模块的一部分

我有一个可用的ionic/firebase应用程序，现在想创建一个具有相同功能的web应用程序。我从以下模板开始：。角度4，火力3.9

现在的问题是，我想使用@input将数据从父组件传递给它的子组件。关于这一点，有很多不同的教程和线程，但我不知道我的代码中有什么地方做错了

父HTML：

<app-child [message]="parentMessage"></app-child>

@Component({
    selector: 'app-tester',
    templateUrl: './collections.component.html',
    styles: [],
})
export class CollectionComponent implements OnInit {
    userEmail = '';
    alerts = [];
    collections = [];
    childData: any;

  parentMessage = "message from parent"

@Input() message: any;

    constructor(...) { 
        ...
    }

    ngOnInit() {
    }
}

子HTML:

{{message}}

@Component({
    selector: 'app-child',
    templateUrl: './collectioninfo.component.html',
    styles: []
})
export class CollectionInfo implements OnInit {
    @Input() message: string;

    constructor(...) { 

    ngOnInit() {}
}

import ...
import { CollectionComponent } from 
'./collections/collections.component';
import { CollectionInfo } from './collections/collectioninfo.component';

@NgModule({
  declarations: [
    AppComponent,
    ...
    CollectionInfo,
    CollectionComponent
  ],
  imports: [
  ],
  providers: [
    CollectionComponent
  ],
  exports: [
    CollectionComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

子TS:

{{message}}

@Component({
    selector: 'app-child',
    templateUrl: './collectioninfo.component.html',
    styles: []
})
export class CollectionInfo implements OnInit {
    @Input() message: string;

    constructor(...) { 

    ngOnInit() {}
}

import ...
import { CollectionComponent } from 
'./collections/collections.component';
import { CollectionInfo } from './collections/collectioninfo.component';

@NgModule({
  declarations: [
    AppComponent,
    ...
    CollectionInfo,
    CollectionComponent
  ],
  imports: [
  ],
  providers: [
    CollectionComponent
  ],
  exports: [
    CollectionComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我收到错误消息“error:Component CollectionComponent不是任何NgModule的一部分，或者该模块尚未导入到您的模块中。”因为该错误表明我正在将导入和模块搞砸

app.module.ts:

{{message}}

@Component({
    selector: 'app-child',
    templateUrl: './collectioninfo.component.html',
    styles: []
})
export class CollectionInfo implements OnInit {
    @Input() message: string;

    constructor(...) { 

    ngOnInit() {}
}

import ...
import { CollectionComponent } from 
'./collections/collections.component';
import { CollectionInfo } from './collections/collectioninfo.component';

@NgModule({
  declarations: [
    AppComponent,
    ...
    CollectionInfo,
    CollectionComponent
  ],
  imports: [
  ],
  providers: [
    CollectionComponent
  ],
  exports: [
    CollectionComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

采集模块.ts

import ...

@NgModule({
  declarations: [
  ],
  imports: [
  ]
})
export class ProfileModule {}

这一个肯定是一团糟：“导出类概要文件模块”显然没有任何意义。我从种子模板的另一个组件复制了它。但当我现在将其重命名为“CollectionModule”时，它会抛出另一个错误：

Error: Cannot find 'ProfileModule' in 'app/collections/collections.module'

看起来“ProfileModule”已导入其他地方，但我找不到位置。也不确定这是否真的影响了“不属于任何NgModule”错误

我读了，但还是不能解决我的问题

---

非常感谢您的帮助。

您需要在

声明下添加组件

而不是在

提供程序中添加组件

@NgModule({
  declarations: [
    AppComponent,
    ...
    CollectionInfo,
    CollectionComponent
  ],
  imports: [
  ],
  providers: [
    //remove this CollectionComponent
  ],
  exports: [
    CollectionComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

原来我的app.routing.ts中有个错误：

const APP_ROUTES: Routes = [
    { path: 'collections', loadChildren: 'app/collections/collections.module#ProfileModule' }
]

因此，我尝试加载一个不再存在于该文件中的模块（尽管Angular的错误消息可能更清楚一些）。此外，我不得不将代码更改为

const APP_ROUTES: Routes = [
    { path: 'collections', component: CollectionComponent }
]

---

非常感谢你的帮助！不幸的是，这不起作用，我仍然收到相同的错误消息（“错误：Component CollectionComponent不是任何NgModule的一部分，或者该模块尚未导入到您的模块中。”）您介意创建一个plunker来描述问题吗？我真的不明白为什么。如果有人想为将来的《崇敬》和其他读者详细阐述这一点，我很乐意接受一个解释得更好的不同答案。