Angular 4 Cannot be associated with <property> because it is not a known <component> property

Question

I am trying to create my own directive in Angular 4. But I got this error when I bind a class property to a component template.

Console Error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'tree'. ("<tree [ERROR ->][data]="data"></tree>"):

My tree-view-component.ts:

@Component({
    selector: 'app-tree-view',
    template: '<tree [data]="data"></tree>'
})
export class TreeViewComponent implements OnInit {

    @Input() data: any[];

    constructor() {
        this.data = [
        {
            label: 'a1',
            subs: [
                {
                    label: 'a11',
                    subs: [
                        {
                            label: 'a111',
                            subs: [
                                {
                                    label: 'a1111'
                                },
                                {
                                    label: 'a1112'
                                }
                            ]
                        },
                        {
                            label: 'a112'
                        }
                    ]
                },
                {
                    label: 'a12',
                }
            ]
         }
     ];
  }

  ngOnInit() { }

}

Here is my full script file: https://pastebin.com/hDyX2Kjj

Does anyone know about this? Tia

Answer 1

Each component, directive and pipe must be registered with @NgModule()

@NgModule({
  declarations: [TreeViewComponent]
})
export class AppModule {}

See https://angular.io/docs/ts/latest/guide/ngmodule.html for details

Answer 2

Aelfinn, , . , , , !!!
, TreeViewStuffModule, TreeViewComponent DoSomethingWithTreeViewModule, TreeViewComponent, :

@NgModule({
  declarations: [
    TreeViewComponent
  ],
  exports: [
    TreeViewComponent
  ]
})
export class TreeViewStuffModule { }

@NgModule({
  imports: [
    TreeViewStuffModule
  ]
})
export class DoSomethingWithTreeViewModule

Answer 3

If you are using TreeViewComponent in another module, you need to import the component in the @NgModulefollowing way:

@NgModule({
    imports: [TreeViewComponent],
    // This says that all components in this module can import TreeViewComponent
    exports: [ThisModulesComponents],
    declarations: [ThisModulesComponents]
})
export class ModuleDependentOnTreeViewComponent