Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding paperbits in existing angular project #190

Open
nitinjs opened this issue Aug 10, 2021 · 2 comments
Open

adding paperbits in existing angular project #190

nitinjs opened this issue Aug 10, 2021 · 2 comments

Comments

@nitinjs
Copy link

nitinjs commented Aug 10, 2021

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"
    }
}
@azaslonov
Copy link
Member

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants