Angular2: Component is not part of any module

Question

I have a working ionic/firebase app and now want to create a web app with the same functionality. I started with this template: https://github.com/ng-lisbon/angular-firebase-seed . It's Angular 4, Firebase 3.9.

Problem now is that I want to pass data from a parent component to it's child using @input. There are a lot of different tutorials and threads out there regarding this, and yet I don't see what I'm doing wrong in my code.

Parent HTML :

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

Parent 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() {
    }
}

Child HTML:

{{message}}

Child TS:

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

    constructor(...) { 

    ngOnInit() {}
}

I get the error message "Error: Component CollectionComponent is not part of any NgModule or the module has not been imported into your module." As the error suggests I'm messing up something with imports and modules.

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

This one is definitely messed up: "export class ProfileModule" obviously doesn't make any sense. I copied it from another component of the seed template. But when I now rename it to "CollectionsModule", it throws another error:

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

Looks like "ProfileModule" is imported somewhere else, but I can't find where. Also not sure if that is really affecting the "is not part of any NgModule"-error.

I read this very good summary of modules in Angular 4 , but still I'm not able to solve my problem.

Thanks a lot for your help.

Answer 1

You need to add the component under declarations not inside Providers

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

Answer 2

Turns out I had a mistake in my app.routing.ts:

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

So I tried to load a module that didn't exist in this file any more (think Angular's error messages could have been a bit clearer on that though). Furthermore I had to change my code to

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