search

paperbits / paperbits-demo

This repository shows an example how developers can use Paperbits to build web apps with rich content authoring capabilities.
https://demo.paperbits.io
MIT License
298 stars 90 forks source link

adding paperbits in existing angular project #190

Closed nitinjs closed 1 month ago

nitinjs commented 3 years ago

Describe the bug I have added the paperbits folder from angular demo folder into my project and added the required declarations in my project but when I run the project it throws "Error: Uncaught (in promise): ReferenceError: setImmediate is not defined" error

is this because I am using angular v9.1.4?? if yes then which version of paperbits I should use with angular v9.1.4?

To Reproduce Steps to reproduce the behavior:

  1. Copy the paperbits folder to your existing angular project
  2. Declare the required declarations and routes
  3. Run the project
  4. See error

Expected behavior The paperbits demo editor should load as same as the demo provided

Screenshots image

Desktop (please complete the following information):

Additional context here's my package.json for reference

{
    "name": "campaigntocash",
    "version": "2.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@agm/core": "^1.0.0-beta.6",
        "@angular-builders/custom-webpack": "^11.0.0",
        "@angular/animations": "^9.1.4",
        "@angular/cdk": "^9.2.4",
        "@angular/common": "^9.1.4",
        "@angular/compiler": "^9.1.4",
        "@angular/core": "^9.1.4",
        "@angular/forms": "^9.1.4",
        "@angular/localize": "^9.0.6",
        "@angular/material": "^9.2.4",
        "@angular/platform-browser": "^9.1.4",
        "@angular/platform-browser-dynamic": "^9.1.4",
        "@angular/router": "^9.1.4",
        "@fullcalendar/angular": "^5.0.0-beta.4",
        "@fullcalendar/core": "^5.0.0-beta.4",
        "@fullcalendar/daygrid": "^5.0.0-beta.4",
        "@fullcalendar/interaction": "^5.0.0-beta.4",
        "@fullcalendar/timegrid": "^5.0.0-beta.4",
        "@iplab/ngx-file-upload": "^1.4.0",
        "@ng-bootstrap/ng-bootstrap": "^4.2.1",
        "@ngrx/effects": "^9.2.0",
        "@ngrx/store": "^9.2.0",
        "@swimlane/ngx-datatable": "^17.0.0",
        "@syncfusion/ej2-angular-calendars": "^18.2.56",
        "@tinymce/tinymce-angular": "^4.2.0",
        "@types/html2canvas": "0.0.35",
        "amazing-time-picker": "^1.8.0",
        "angular-archwizard": "^5.0.0",
        "angular-datatables": "^9.0.2",
        "angular-dual-listbox": "^5.0.1",
        "angular-highcharts-chart": "^1.0.2",
        "angular-pell": "^0.1.0",
        "angular2-chartjs": "^0.5.1",
        "angular2-text-mask": "^9.0.0",
        "angular2-tinymce": "^3.3.0",
        "apexcharts": "^3.8.0",
        "bootstrap": "^4.3.1",
        "canvg": "^3.0.6",
        "datatables.net": "^1.10.19",
        "datatables.net-buttons": "^1.5.6",
        "datatables.net-buttons-dt": "^1.5.6",
        "datatables.net-dt": "^1.10.19",
        "famfamfam-flags": "^1.0.0",
        "file-saver": "^2.0.2",
        "fullcalendar": "^3.10.2",
        "gojs": "^2.1.19",
        "gojs-angular": "^1.0.3",
        "highcharts": "^6.2.0",
        "html2canvas": "^1.0.0-rc.7",
        "jquery": "^3.4.1",
        "js-sha1": "^0.6.0",
        "js-sha256": "^0.9.0",
        "jspdf": "^1.5.3",
        "jszip": "^3.2.2",
        "moment": "^2.24.0",
        "moment-timezone": "^0.5.31",
        "ng-bootstrap-nested-select": "^1.0.3",
        "ng-click-outside": "^4.0.0",
        "ng-number-formatter": "^1.5.0",
        "ng-pick-datetime": "^7.0.0",
        "ng-select": "^1.0.2",
        "ng2-datetime": "^1.4.0",
        "ng2-dragula": "^2.1.1",
        "ng2-nouislider": "^1.8.2",
        "ng2-toasty": "^4.0.3",
        "ngx-bar-rating": "^1.1.0",
        "ngx-chips": "^2.0.2",
        "ngx-clipboard": "^13.0.1",
        "ngx-color-picker": "^8.0.1",
        "ngx-custom-validators": "^9.0.1",
        "ngx-daterangepicker-material": "^3.0.1",
        "ngx-facebook": "^3.0.0-0",
        "ngx-infinite-scroll": "^9.0.0",
        "ngx-lightbox": "^2.0.0",
        "ngx-owl-carousel-o": "^1.1.5",
        "ngx-perfect-scrollbar": "^8.0.0",
        "ngx-quill": "^11.0.0",
        "ngx-timer": "^1.0.6",
        "ngx-tinymce": "^10.0.1",
        "nouislider": "^14.0.1",
        "peity": "^3.3.0",
        "pikaday": "^1.8.0",
        "rxjs": "^6.5.3",
        "rxjs-compat": "^6.5.2",
        "screenfull": "^4.2.1",
        "sweetalert2": "^8.13.0",
        "tinymce": "^4.9.11",
        "tslib": "^1.10.0",
        "uuid": "^8.1.0",
        "zone.js": "~0.10.2",
        "@paperbits/common": "0.1.328",
        "@paperbits/core": "0.1.328",
        "@paperbits/prosemirror": "0.1.328",
        "@paperbits/styles": "0.1.328",
        "copy-webpack-plugin": "^6.1.1",
        "mime": "^2.4.6",
        "mime-types": "^2.1.27",
        "mini-css-extract-plugin": "^0.11.2"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.900.6",
        "@angular-extensions/lint-rules": "^1.2.0",
        "@angular/cli": "~9.0.6",
        "@angular/compiler-cli": "^9.1.4",
        "@angular/language-service": "^9.1.4",
        "@types/datatables.net": "^1.10.17",
        "@types/datatables.net-buttons": "^1.4.2",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/jquery": "^3.3.30",
        "@types/jspdf": "^1.3.3",
        "@types/node": "^12.11.1",
        "brotli-webpack-plugin": "^1.1.0",
        "codelyzer": "^5.1.2",
        "compression-webpack-plugin": "^6.0.5",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "node-sass": "^4.12.0",
        "protractor": "~5.4.0",
        "quill": "^1.3.7",
        "ts-node": "~7.0.0",
        "tslint": "~5.15.0",
        "typescript": "~3.7.5",
        "@angular-builders/custom-webpack": "^10.0.1",
        "awesome-typescript-loader": "^5.2.1",
        "html-loader": "^1.3.1",
        "postcss-loader": "^4.0.2"
    }
}
azaslonov commented 3 years ago

Hi @nitinjs, this particular error means that polyfill is missing (see polyfills.ts file in the demo project). Also, you may want to take a look into webpack extension registered in angular.json file, which does a lot of other things (in the demo project as well).

azaslonov commented 3 years ago

@nitinjs, no you have follow up questions or we can close this issue?