Zicrael / ngx-tree-dnd

Angular 7 support, data sortable draggable smart tree.
https://ngx-tree-dnd.stackblitz.io
MIT License
39 stars 11 forks source link

Can't Find Component #7

Closed Imaginativeone closed 5 years ago

Imaginativeone commented 5 years ago

Describe the bug A clear and concise description of what the bug is. When I use the directive, it can't find the component

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here. core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'treeData' since it isn't a known property of 'ngx-tree-component'.

  1. If 'ngx-tree-component' is an Angular component and it has 'treeData' input, then verify that it is part of this module.
  2. If 'ngx-tree-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ngx-tree-component [ERROR ->][treeData]='youTree'>

<ion-content (onload)="testFunc()"> "): ng:///HomePageModule/HomePage.html@12:20 'ngx-tree-component' is not a known element:

  1. If 'ngx-tree-component' is an Angular component, then verify that it is part of this module.
  2. If 'ngx-tree-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]<ngx-tree-component [treeData]='youTree'>

<ion-content (onload)="testFunc()"> "): ng:///HomePageModule/HomePage.html@12:0 Error: Template parse errors: Can't bind to 'treeData' since it isn't a known property of 'ngx-tree-component'.

  1. If 'ngx-tree-component' is an Angular component and it has 'treeData' input, then verify that it is part of this module.
  2. If 'ngx-tree-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ngx-tree-component [ERROR ->][treeData]='youTree'>

<ion-content (onload)="testFunc()"> "): ng:///HomePageModule/HomePage.html@12:20 'ngx-tree-component' is not a known element:

  1. If 'ngx-tree-component' is an Angular component, then verify that it is part of this module.
  2. If 'ngx-tree-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]<ngx-tree-component [treeData]='youTree'>

<ion-content (onload)="testFunc()"> "): ng:///HomePageModule/HomePage.html@12:0 at syntaxError (compiler.js:1016) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14813) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24000) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:23987) at compiler.js:23930 at Set.forEach () at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930) at compiler.js:23840 at Object.then (compiler.js:1007) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23839) at syntaxError (compiler.js:1016) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14813) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24000) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:23987) at compiler.js:23930 at Set.forEach () at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930) at compiler.js:23840 at Object.then (compiler.js:1007) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23839) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3815) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595)

Zicrael commented 5 years ago

Hello Imaginativeone!
Did you import NgxTreeModule?

In you module:

import { NgxTreeModule } from 'ngx-tree-dnd'; // here
 imports: [
    BrowserModule,
    NgxTreeModule,   // <=== here
    LibraryModule 
  ],

in your component:

<ngx-tree-component [treeData]='youTree'> </ngx-tree-component>

you can use demo:

https://stackblitz.com/edit/ngx-tree-dnd

Imaginativeone commented 5 years ago

Importing the Module works just fine. When I add the selector to my template, that's when my app can't find the Component.

Zicrael commented 5 years ago

Importing the Module works just fine. When I add the selector to my template, that's when my app can't find the Component.

Can you send me code of you component and module? I check and try fix.

Imaginativeone commented 5 years ago

I sent you a Collaboration Invite, but I'm not so great with using that feature yet...

Zicrael commented 5 years ago

I push zicrael-tree-branch on you repo, check this. In Home page working example. Thanks for issue I edit documentation now. In you app on zicrael-tree-branch its work.

Zicrael commented 5 years ago

Is it work in my branch now?

Imaginativeone commented 5 years ago

Wait...no, not working yet.

Imaginativeone commented 5 years ago

Would a screenshot be helpful?

Imaginativeone commented 5 years ago

Does this Component need to be imported into the Application Component (and not some lower Component in the application hierarchy)?

Zicrael commented 5 years ago

Its can be implemented in any module, and used in component depend to module.

Zicrael commented 5 years ago

https://imgur.com/a/UtJ6lV1 Screenshoot. Make sure you checkout in my branch where you use it.