paperbits-demo icon indicating copy to clipboard operation
paperbits-demo copied to clipboard
verified publisher icon paperbits

adding paperbits in existing angular project

Open nitinjs opened this issue 4 years ago • 2 comments

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):

  • OS: Windows
  • Browser: Firefox
  • Version: 90.0.2

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"
    }
}

nitinjs avatar Aug 10 '21 11:08 nitinjs

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 avatar Aug 10 '21 12:08 azaslonov

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

azaslonov avatar Aug 13 '21 04:08 azaslonov