title: can't bind to input var since it isn't a known property of component
body: <p>I'm using angular 2.3. And, yes, I've seen the half dozen or so other similar questions, but I could not find an answer in any of them to fix my problem. </p>
  
  <p>I have a component called LabelSpanComponent:</p>
  
  <pre><code>// label-span.component.ts
  import {Component, Input} from "@angular/core";
  import {LabelSpan} from "../models/label-span";
  
  @Component({
      selector: 'label-span',
      template: `
          &lt;label *ngIf="entry.labelValue"&gt;{{entry.labelValue}} &lt;/label&gt;
          &lt;span&gt;{{entry.spanValue}}&lt;/span&gt;`
  })
  export class LabelSpanComponent {
      @Input() entry: LabelSpan
  }
  </code></pre>
  
  <p>LabelSpan is:</p>
  
  <pre><code>// label-span.ts
  export interface LabelSpan {
      labelValue: string,
      spanValue: string
  }
  </code></pre>
  
  <p>And this worked fine when I used it on a page. But when I tried to use it in two different pages, each with their own module, I got an error from angular:</p>
  
  <blockquote>
    <p>Type LabelSpanComponent is part of the declarations of 2 modules:
    ThisDetailModule and ThatDetailModule! Please consider moving
    LabelSpanComponent to a higher module that imports
    ThisDetailModule and ThatDetailModule. You can also create a
    new NgModule that exports and includes LabelSpanComponent then import
    that NgModule in ThisDetailModule and ThatDetailModule.</p>
  </blockquote>
  
  <p>So, I decided that I should probably create an module for LabelSpanComponent:</p>
  
  <pre><code>// label-span.module.ts
  import {NgModule} from "@angular/core";
  import {FormsModule} from "@angular/forms";
  import {BrowserModule} from "@angular/platform-browser";
  import {LabelSpanComponent} from "./label-span.component";
  
  @NgModule({
      imports: [
          FormsModule,
          BrowserModule
      ],
      declarations: [
          LabelSpanComponent
      ],
      providers:    [  ]
  })
  export class LabelSpanModule { }
  </code></pre>
  
  <p>And I added this module to app.module.ts:</p>
  
  <pre><code>// app.module.ts
  /* other imports */
  import {LabelSpanModule} from "./templates/label-span.module";
  
  @NgModule({
      imports: [
          /* other modules */
          LabelSpanModule
      ],
      declarations: [ AppComponent ],
  ...
  })
  export class AppModule{ }
  </code></pre>
  
  <p>In both ThisDetailModule and ThatDetailModule, I have also included the LabelSpanModule as part of their imports.  However, I am getting the following errors:</p>
  
  <blockquote>
    <p>Can't bind to 'entry' since it isn't a known property of 'label-span'.
    1. If 'label-span' is an Angular component and it has 'entry' input, then verify that it is part of this module.</p>
  </blockquote>
  
  <p>Ah, for what it's worth, here is how it is utilized in the html page:</p>
  
  <pre><code>&lt;label-span id="the-id" [entry]="myVar"&gt;&lt;/label-span&gt;
  </code></pre>
  
  <p>Where in the component file for the page, I have:</p>
  
  <p>myVar = { labelValue: "The Label", spanValue: "The Span" }</p>
  
  <p>What am I missing or doing wrong?</p>