title: Angular2: Component is not part of any module
body: <p>I have a working ionic/firebase app and now want to create a web app with the same functionality. I started with this template:  <a href="https://github.com/ng-lisbon/angular-firebase-seed" rel="nofollow noreferrer">https://github.com/ng-lisbon/angular-firebase-seed</a>. It's Angular 4, Firebase 3.9. </p>
  
  <p>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.</p>
  
  <p><strong>Parent HTML</strong>:</p>
  
  <pre><code>&lt;app-child [message]="parentMessage"&gt;&lt;/app-child&gt;
  </code></pre>
  
  <p><strong>Parent TS</strong>:</p>
  
  <pre><code>@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() {
      }
  }
  </code></pre>
  
  <p><strong>Child HTML:</strong></p>
  
  <pre><code>{{message}}
  </code></pre>
  
  <p><strong>Child TS:</strong></p>
  
  <pre><code>@Component({
      selector: 'app-child',
      templateUrl: './collectioninfo.component.html',
      styles: []
  })
  export class CollectionInfo implements OnInit {
      @Input() message: string;
  
      constructor(...) { 
  
      ngOnInit() {}
  }
  </code></pre>
  
  <p>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. </p>
  
  <p><strong>app.module.ts:</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>collectionsmodule.ts</strong></p>
  
  <pre><code>import ...
  
  @NgModule({
    declarations: [
    ],
    imports: [
    ]
  })
  export class ProfileModule {}
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>Error: Cannot find 'ProfileModule' in 'app/collections/collections.module'
  </code></pre>
  
  <p>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.</p>
  
  <p>I read <a href="https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407" rel="nofollow noreferrer">this very good summary of modules in Angular 4</a>, but still I'm not able to solve my problem.</p>
  
  <p>Thanks a lot for your help.</p>