can't bind to input var since it isn't a known property of component

Question

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.

I have a component called LabelSpanComponent:

// label-span.component.ts
import {Component, Input} from "@angular/core";
import {LabelSpan} from "../models/label-span";

@Component({
    selector: 'label-span',
    template: `
        <label *ngIf="entry.labelValue">{{entry.labelValue}} </label>
        <span>{{entry.spanValue}}</span>`
})
export class LabelSpanComponent {
    @Input() entry: LabelSpan
}

LabelSpan is:

// label-span.ts
export interface LabelSpan {
    labelValue: string,
    spanValue: string
}

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:

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.

So, I decided that I should probably create an module for LabelSpanComponent:

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

And I added this module to app.module.ts:

// app.module.ts
/* other imports */
import {LabelSpanModule} from "./templates/label-span.module";

@NgModule({
    imports: [
        /* other modules */
        LabelSpanModule
    ],
    declarations: [ AppComponent ],
...
})
export class AppModule{ }

In both ThisDetailModule and ThatDetailModule, I have also included the LabelSpanModule as part of their imports. However, I am getting the following errors:

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.

Ah, for what it's worth, here is how it is utilized in the html page:

<label-span id="the-id" [entry]="myVar"></label-span>

Where in the component file for the page, I have:

myVar = { labelValue: "The Label", spanValue: "The Span" }

What am I missing or doing wrong?

Answer 1

You need to export the component

@NgModule({
    imports: [
        FormsModule,
        BrowserModule
    ],
    declarations: [
        LabelSpanComponent
    ],
    exports: [LabelSpanComponent]
    providers:    [  ]
})
export class LabelSpanModule { }

Check Shared Module section on docs for useful info: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module