Angular2：组件不是任何模块的一部分

Question

我有一个可以工作的 ionic/firebase 应用，现在想创建一个具有相同功能的网络应用。我从这个模板开始：https://github.com/ng-lisbon/angular-firebase-seed。它是 Angular 4，Firebase 3.9。

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

父 HTML：

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

父 TS：

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

儿童 TS：

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

    constructor(...) { 

    ngOnInit() {}
}

我收到错误消息“错误：组件 CollectionComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。”正如错误所暗示的那样，我用导入和模块搞砸了一些东西。

app.module.ts：

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

collectionsmodule.ts

import ...

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

这个肯定搞砸了：“export class ProfileModule”显然没有任何意义。我从种子模板的另一个组件中复制了它。但是当我现在将其重命名为“CollectionsModule”时，它会引发另一个错误：

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

看起来“ProfileModule”是在其他地方导入的，但我找不到在哪里。也不确定这是否真的影响“不是任何 NgModule 的一部分”-错误。

我阅读了this very good summary of modules in Angular 4，但仍然无法解决我的问题。

非常感谢您的帮助。

Answer 1

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

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

所以我尝试加载一个不再存在于该文件中的模块（但认为 Angular 的错误消息可能会更清楚一些）。此外，我必须将代码更改为

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

Answer 2

您需要将组件添加到 declarations 下，而不是 Providers

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