TinyMCE integration not working with angular 8

Question

I am trying to add tinymce to my angular 8 application. I am getting following error in VS Code console:

ERROR in node_modules/@tinymce/tinymce-angular/editor/editor.component.d.ts(8,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/@tinymce/tinymce-angular/editor/editor.component.d.ts(9,9): error TS1086: An accessor cannot be declared in an ambient context.       
node_modules/@tinymce/tinymce-angular/editor/editor.component.d.ts(10,9): error TS1086: An accessor cannot be declared in an ambient context.      

Package.json (I am just adding dependencies and dev-dependencies, not including the ccomplete file)

{

  "dependencies": {
    "@agm/core": "1.0.0-beta.6",
    "@angular/animations": "8.0.0",
    "@angular/cdk": "8.0.1",
    "@angular/common": "8.0.0",
    "@angular/compiler": "8.0.0",
    "@angular/core": "8.0.0",
    "@angular/forms": "8.0.0",
    "@angular/http": "7.2.15",
    "@angular/localize": "^9.0.5",
    "@angular/material": "8.0.1",
    "@angular/platform-browser": "8.0.0",
    "@angular/platform-browser-dynamic": "8.0.0",
    "@angular/platform-server": "8.0.0",
    "@angular/router": "8.0.0",
    "@auth0/angular-jwt": "^5.0.1",
    "@kolkov/angular-editor": "^1.1.3",
    "@ng-bootstrap/ng-bootstrap": "5.2.2",
    "@syncfusion/ej2-angular-richtexteditor": "^18.2.56",
    "@tinymce/tinymce-angular": "^4.2.0",
    "ajv": "6.10.0",
    "arrive": "2.4.1",
    "bootstrap": "4.3.1",
    "bootstrap-material-design": "4.1.2",
    "bootstrap-notify": "3.1.3",
    "bootstrap-vertical-tabs": "^1.2.2",
    "chart.js": "2.8.0",
    "classlist.js": "1.1.20150312",
    "core-js": "3.1.3",
    "express": "4.17.1",
    "googleapis": "40.0.0",
    "hammerjs": "2.0.8",
    "jquery": "3.4.1",
    "jwt-decode": "^2.2.0",
    "moment": "2.24.0",
    "ng2-search-filter": "^0.5.1",
    "ngx-dropzone": "^2.2.2",
    "ngx-spinner": "^8.1.0",
    "ngx-toastr": "10.0.4",
    "popper.js": "1.15.0",
    "rxjs": "6.5.2",
    "rxjs-compat": "6.5.2",
    "tslib": "1.10.0",
    "web-animations-js": "2.3.1",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.23",
    "@angular/cli": "8.0.2",
    "@angular/compiler-cli": "8.0.0",
    "@angular/language-service": "8.0.0",
    "@types/bootstrap": "4.3.0",
    "@types/chartist": "0.9.46",
    "@types/googlemaps": "3.36.4",
    "@types/jasmine": "3.5.8",
    "@types/jasminewd2": "2.0.8",
    "@types/jquery": "3.3.29",
    "@types/node": "12.0.7",
    "codelyzer": "5.1.0",
    "jasmine-core": "3.4.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.4.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "2.1.1",
    "karma-jasmine": "3.1.1",
    "karma-jasmine-html-reporter": "1.5.2",
    "protractor": "5.4.3",
    "ts-node": "8.2.0",
    "tslint": "5.17.0",
    "typescript": "3.4.5"
  }
}

Webpage still loads up but tinymce is not working on the page. can anyone please help me out on solving this? Or is there any good alternative for tinymce for angular 8 thanks in advance.

Answer 1

TinyMCE supports:

For Angular 9+, use integration version 4.x:

npm install @tinymce/tinymce-angular@4.0.0

For Angular 8, use integration version 3.x:

npm install @tinymce/tinymce-angular@3.0.0

Note: Versions below Angular 5 are not supported

Source documentation

Answer 2

Try to upgrade the version of TypeScript and tinymce-angular. In the past I solved a similar issue updating the Typescript package to the latest version.

Another way is disabling the option of checking libraries in node_modules by setting up "skipLibCheck": true in tsconfig.json:

{ "compilerOptions": { "skipLibCheck": true, }