Angular2：コンポーネントはモジュールの一部ではありません

Question

ionic/firebaseアプリケーションが動作しており、同じ機能を持つWebアプリケーションを作成したいと考えています。私はこのテンプレートで始まった：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 {} 

はこの1つは間違いなく台無しにされ

： "エクスポートクラスのProfileModule" は、明らかに何らかの意味がありません。 。シードテンプレートの別のコンポーネントからコピーしました。しかし、私は今まで「CollectionsModule」に名前を変更するとき、それは別のエラーがスローされます。

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

は「ProfileModule」のように見えるどこかにインポートされますが、私はどこ見つけることができません。また、実際に "NgModuleの一部ではありません" - エラーに影響しているかどうかはわかりません。

私はthis very good summary of modules in Angular 4を読みましたが、私はまだ私の問題を解決できません。

ありがとうございました。だから私が試した

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

：

Answer 1

あなたがProviders

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

Answer 2

内declarationsないの下にコンポーネントを追加する必要があり、私は私のapp.routing.tsでミスをしていたが判明このファイルにもう存在しなかったモジュールをロードすることができます（Angularのエラーメッセージはそれでも少しはっきりしていると思います）。さらにコードを変更する必要がありました。

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