AngularJS 2 failed to bind property

Question

I have a generic "menubar" component inside it's own module:

@Component({
    selector: 'menubar',
    templateUrl: './menu.component.html',
})
export class MenuComponent {
    @Input('items') menuItems: string[];
}

with this template:

<ul class="menu">
    <li class="menuItem" *ngFor="let menuItem of menuItems">
        {{ menuItem }}
    </li>
</ul>

I then have the main app component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "Sitename";
  menuItems = [
    'Home',
    'Training'
  ];
}

with the following template:

<div>
  <h1>{{ title }}</h1>
</div>
<menubar [items]="menuItems"></menubar>

<div id="contentView">
  <router-outlet></router-outlet>
</div>

The app.module imports the menubar module:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HomeModule,
    TrainingModule,
    MenuModule,
    SharedModule,
    AppRouting.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 

}

and the MenuComponent is declared by the MenuModule:

@NgModule({
    imports: [
        SharedModule
    ],
    declarations: [
        MenuComponent
    ]    
})
export class MenuModule { }

If I comment out the menubar directive, the rest of the app works fine (without the menu of course). As soon as I uncomment the menubar directive, I get the following error in the Chrome console:

zone.js:405Unhandled Promise rejection: Template parse errors:
Can't bind to 'items' since it isn't a known property of 'menubar'. ("
  <h1>{{ title }}</h1>
</div>
<menubar [ERROR ->][items]="menuItems"></menubar>

<div id="contentView">
"): AppComponent@3:9
    'menubar' is not a known element:
1. If 'menubar' is an Angular component, then verify that it is part of this module.
2. If 'menubar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
  <h1>{{ title }}</h1>
</div>
[ERROR ->]<menubar [items]="menuItems"></menubar>

<div id="contentView">
"): AppComponent@3:0 ; Zone: <root> ; Task: Promise.then ; Value:         SyntaxError {_nativeError: Error: Template parse errors:
Can't bind to 'items' since it isn't a known property of 'menubar'. ("…} Error: Template parse errors:
Can't bind to 'items' since it isn't a known property of 'menubar'. ("
  <h1>{{ title }}</h1>
</div>
<menubar [ERROR ->][items]="menuItems"></menubar>

<div id="contentView">
"): AppComponent@3:9
'menubar' is not a known element:
1. If 'menubar' is an Angular component, then verify that it is part of this module.
2. If 'menubar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
  <h1>{{ title }}</h1>
</div>
[ERROR ->]<menubar [items]="menuItems"></menubar>

<div id="contentView">
"): AppComponent@3:0

I don't understand why it's not seeing the menubar component.

Answer 1

The problem is that a Declaration does not automatically Export, as many of the tutorials imply.

Modifying the MenuModule to this:

@NgModule({
    imports: [
        SharedModule
    ],
    declarations: [
        MenubarComponent
    ],
    exports: [
        MenubarComponent
    ]
})
export class MenubarModule { }

fixed the issue.