Editor not working with Angular version 9

[calibri87]

Editor not working with Angular version 9

I'm using the latest version of this library: "@kolkov/angular-editor": "^1.1.2",

Anything I cant do?

My usage:

<angular-editor formControlName="description" [config]="editorConfig"></angular-editor>

  public editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '10rem',
    minHeight: '10rem',
    placeholder: 'Description*',
    translate: 'no'
  };

[calibri87]

@kolkov when will you be releasing the new version of the text editor so it works with Angular version 9?

[kolkov]

Hi! What version of Angular you are using?

[calibri87]

@kolkov I'm using Angular: "@angular/core": "~9.1.1",

This is my package json:

{
  "name": "test",
  "version": "1.0.2",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "start:staging": "ng serve --configuration=staging",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server && node ./tools/copy-artifacts.js",
    "build-staging:ssr": "npm run build:staging-client-and-server-bundles && npm run compile:server && node ./tools/copy-artifacts.js",
    "build:client-and-server-bundles": "ng build --prod && ng run behired:server:production",
    "build:staging-client-and-server-bundles": "ng build -c staging && ng run behired:server:staging",
    "locally:staging": "firebase use behired-staging && firebase serve",
    "locally:prod": "firebase use leisure-project && firebase serve",
    "staging:deploy": "firebase use behired-staging && firebase deploy",
    "prod:deploy": "firebase use leisure-project && firebase deploy"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "~9.1.1",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/fire": "^6.0.0",
    "@angular/forms": "~9.1.1",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/platform-server": "^9.1.1",
    "@angular/pwa": "^0.901.1",
    "@angular/router": "~9.1.1",
    "@angular/service-worker": "^9.1.1",
    "@babel/cli": "7.4.3",
    "@babel/core": "7.9.0",
    "@babel/preset-env": "7.9.5",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@hackages/ngxerrors": "^8.0.0",
    "@kolkov/angular-editor": "^1.1.2",
    "@nguniversal/express-engine": "^9.1.0",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@ngx-meta/core": "^8.0.2",
    "@ngx-pwa/offline": "^9.1.0",
    "@sentry/browser": "^5.15.4",
    "angular-google-map": "0.0.2",
    "animate.css": "^3.7.2",
    "aos": "^2.3.4",
    "basscss": "^8.1.0",
    "basscss-sass": "^4.0.0",
    "chart.js": "^2.9.3",
    "core-js": "^3.6.4",
    "express": "^4.17.1",
    "firebase": "7.13.2",
    "fs-extra": "^9.0.0",
    "geofirestore": "3.2.3",
    "http-server": "^0.12.1",
    "latlon-geohash": "1.1.0",
    "lodash": "^4.17.15",
    "lozad": "^1.14.0",
    "moment": "^2.24.0",
    "ng2-truncate": "^1.3.17",
    "ngx-google-places-autocomplete": "^2.0.4",
    "ngx-prevent-double-submission": "^0.1.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "@fortawesome/fontawesome-free": "^5.7.2",
    "typescript": "~3.8.3"
  }
}

[calibri87]

@kolkov any idea what I can do? I need it to work with version 9 of Angular. Currently the page goes blank. It only works with my Angular 7.

[kolkov]

Thanks! I will try to build app with TS 3.8.3. With Angular 9.0 and TS 3.6 this app was built successfully.

[calibri87]

@kolkov thank you! Did you get the same issue?

[calibri87]

@kolkov I tried rolling my typescript back to 3.6 and it didnt work. I get white screen and browser eventually crashes.

[kolkov]

We need rolling back TS and Angular to 9.0. But I will try to fix this problem soon as possible.

[kolkov]

https://stackblitz.com/edit/angular-editor-wysiwyg this demo at stackblitz works with 9.1.1

[kolkov]

I can't reproduce. Provide an repo please.

[danielehrhardt]

When i disable sanitize the Editor is not editable. So the Content Area

[empystudio]

Hi, I have the same issue and I can see the following error: ERROR TypeError: "ctx.config is undefined"

in this point: function AngularEditorComponent_Query(rf, ctx)

I'm using

"@angular/core": "~9.1.0",
"@kolkov/angular-editor": "^1.1.2",

the HTML is <angular-editor formControlName="body" [config]="editorConfig"></angular-editor>

with this configuration:

public editorConfig: {
    editable: true,
    spellcheck: true,
    height: '25rem',
    minHeight: '5rem',
    translate: 'no',
    placeholder: 'Testo newsletter',
    customClasses: []
  };

[empystudio]

I fixed my issue declaring editorConfig as AngularEditorConfig:

public editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '25rem',
    minHeight: '5rem',
    translate: 'no',
    placeholder: 'Testo newsletter',
    customClasses: []
  };

when I used this component in Angular 7 it was working without the AngularEditorConfig cast, that's why I hadn't care of it

[karthik96siddhu]

Hi kolkov, I am facing issue with unordered and ordered list, when I click on the icons cursor is moving but can't able to see number or bullet points. I am using angular 8