search

tanepiper / ngx-tinynodes

Monorepo for components released on NPM @tinynodes
https://tanepiper.github.io/ngx-tinynodes/
Other
37 stars 15 forks source link

[BUG] <ngx-editorJS - 4.0.0>: TypeError: this.editorJs is not a constructor #24

Closed CarlosValencia78 closed 3 years ago

CarlosValencia78 commented 3 years ago

Which Library? ngx-editorjs

Describe the bug Attempting to setup ngx-editorjs in Angular 9 project, but receive the error:

TypeError: this.editorJs is not a constructor at NgxEditorJSService. (tinynodes-ngx-editorjs.js:163) ... ...

To Reproduce Steps to reproduce the behavior:

  1. Install ngx-editorjs (npm install @tinynode/ngx-editorjs) and ALL dependencies

  2. In package.json:

"@editorjs/code": "^2.6.0", "@editorjs/editorjs": "^2.19.0", "@editorjs/embed": "^2.4.0", "@editorjs/header": "^2.6.1", "@editorjs/image": "^2.6.0", "@editorjs/inline-code": "^1.3.1", "@editorjs/link": "^2.3.1", "@editorjs/list": "^1.6.1", "@editorjs/paragraph": "^2.8.0", "@editorjs/quote": "^2.4.0", "@editorjs/simple-image": "^1.4.0", "@editorjs/warning": "^1.2.0", "@tinynodes/ngx-editorjs": "^4.0.0", "@tinynodes/ngx-editorjs-plugins": "^3.0.0"

  1. In app.module.ts

import { NgxEditorJSComponentModule } from '@tinynodes/ngx-editorjs" import { NgxEditorjsPluginsModule } from '@tinynodes/ngx-editorjs-plugins" .... @NgModule({ ... imports:[ ... NgxEditorJSComponentModule, NgxEditorjsPluginsModule ] ... })

  1. instance in my components html (inputs.component.html):

<ngx-editorjs [holder]="'editorJS'">

Expected behavior Expect to see the editor.js component / editor

Screenshots No screenshots as this is a task for my job and I am using my personal computer to post this message.

Desktop (please complete the following information): Chrome

tanepiper commented 3 years ago

Cannot reproduce, working example here https://github.com/tanepiper/basic-editorjs-example

CarlosValencia78 commented 3 years ago

Upon cloning your project it works, however when trying to implement your design (app.module.ts, app.component.html, package.json) I am faced with the error:

ERROR error: Uncaught (in promise): Error: Error in NgxEditorJSDirective::ngAfterContentInit - Directive element has no ID

When I apply the attribute [holder]="'editorjs'", I am met with the original 'this.editorjs is not a constructor' error.

I would appreciate some help other than you sending me to your GitHub, it has not helped solve this issue in the two other bugs I have seen that are facing the same exact issue.

tanepiper commented 3 years ago

@CarlosValencia78 If you are passing a holder, you also need an element with that ID on the page (e.g. <div id="editorjs"></div>)

https://github.com/tanepiper/ngx-tinynodes/blob/master/libs/ngx-editorjs/ngx-editorjs/src/lib/directives/ngx-editorjs.directive.ts#L252