Adding support for Angular Ivy

[tomamaric]

When upgrading our app to Angular v16, ng2-flatpickr is not working anymore, since Angular removed View engine and ng2-flatpick is not compatible with Angular Ivy.

ng2-flatpickr should be compatible with Angular Ivy in order to be used with new Angular version.

Can you please tell me if there is a plan for adding support for Ivy in near future?

[AngelCareaga]

I don't know if you already solved it, but in my profile I made a fork where it is already functional with the latest version of Angular 17.

[yomiex]

@AngelCareaga

I'm getting require is not defined after running ng serve - no compilation error during build, what would be the cause?

Dependencies:

"dependencies": {
    "@angular/animations": "17.0.8",
    "@angular/cdk": "17.0.4",
    "@angular/common": "17.0.8",
    "@angular/compiler": "17.0.8",
    "@angular/core": "17.0.8",
    "@angular/flex-layout": "15.0.0-beta.42",
    "@angular/forms": "17.0.8",
    "@angular/google-maps": "17.0.4",
    "@angular/localize": "17.0.8",
    "@angular/platform-browser": "17.0.8",
    "@angular/platform-browser-dynamic": "17.0.8",
    "@angular/router": "17.0.8",
    "@auth0/angular-jwt": "5.0.2",
    "@ali-hm/angular-tree-component": "12.0.5",
    "@ctrl/ngx-csv": "6.0.0",
    "@fortawesome/angular-fontawesome": "0.10.2",
    "@fortawesome/fontawesome-svg-core": "6.1.2",
    "@fortawesome/free-regular-svg-icons": "6.1.2",
    "@fortawesome/free-solid-svg-icons": "6.1.2",
    "@fullcalendar/angular": "6.1.10",
    "@fullcalendar/core": "6.1.10",
    "@fullcalendar/daygrid": "6.1.10",
    "@fullcalendar/interaction": "6.1.10",
    "@fullcalendar/list": "6.1.10",
    "@fullcalendar/timegrid": "6.1.10",
    "@ks89/angular-modal-gallery": "^9.0.0",
    "@ng-select/ng-select": "12.0.4",
    "@ngx-translate/core": "15.0.0",
    "@sweetalert2/ngx-sweetalert2": "12.2.0",
    "@swimlane/ngx-datatable": "20.1.0",
    "@yaireo/tagify": "4.17.9",
    "@zxing/browser": "0.1.4",
    "@zxing/library": "0.20.0",
    "@zxing/ngx-scanner": "17.0.0",
    "angular-in-memory-web-api": "0.17.0",
    "angular-shepherd": "17.0.0",
    "animate.css": "4.1.1",
    "apexcharts": "3.45.1",
    "bs-stepper": "1.7.0",
    "chart.js": "4.4.1",
    "feather-icons": "4.29.1",
    "file-saver": "2.0.5",
    "flatpickr": "4.6.13",
    "google-libphonenumber": "3.2.33",
    "hammerjs": "2.0.8",
    "katex": "0.16.9",
    "lodash": "4.17.21",
    "moment": "2.30.1",
    "mousetrap": "1.6.5",
    "ng-apexcharts": "1.8.0",
    "ng-block-ui": "4.0.1",
    "ng2-charts": "5.0.4",
    "ng2-dragula": "5.0.1",
    "ng2-file-upload": "5.0.0",
    "ng2-flatpickr": "https://gitpkg.now.sh/yomiex/ng2-flatpickr/dist/ng2-flatpickr?master",
    "ng2-nouislider": "2.0.0",
    "ngx-filesaver": "12.0.0",
    "ngx-highlightjs": "10.0.0",
    "ngx-mask": "17.0.4",
    "ngx-quill": "24.0.4",
    "ngx-tagify": "15.0.5",
    "ngx-toastr": "18.0.0",
    "node-waves": "0.7.6",
    "nouislider": "15.7.1",
    "quill": "1.3.7",
    "sweetalert2": "11.10.2",
    "zone.js": "0.14.2",
    "rxjs": "7.8.1",
    "ngx-scanner-qrcode": "1.6.7",
    "ngx-qrcode-styling": "1.3.2",
    "@ng-bootstrap/ng-bootstrap": "11.0.1",
    "bootstrap": "4.6.2",
    "ngx-bootstrap": "12.0.0",
    "ngx-intl-tel-input": "3.2.0",
    "intl-tel-input": "18.3.3",
    "ngx-scrollbar": "13.0.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.8",
    "@angular/cli": "17.0.8",
    "@angular/compiler-cli": "17.0.8",
    "@angular/language-service": "17.0.8",
    "@angularclass/hmr": "3.0.0",
    "@types/hammerjs": "^2.0.41",
    "@types/mousetrap": "1.6.15",
    "@types/node": "20.10.5",
    "codelyzer": "6.0.2",
    "karma": "6.4.2",
    "karma-chrome-launcher": "3.2.0",
    "karma-coverage": "2.2.1",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "@types/jasmine": "5.1.4",
    "jasmine-core": "5.1.1",
    "typescript": "5.2.2",
    "webpack-bundle-analyzer": "4.10.1"
  },
  "overrides": {
    "ng2-dragula": {
      "@angular/common": "$@angular/common",
      "@angular/core": "$@angular/core",
      "@angular/animations": "$@angular/animations"
    },
    "@sweetalert2/ngx-sweetalert2": {
      "@angular/common": "$@angular/common",
      "@angular/core": "$@angular/core",
      "@angular/animations": "$@angular/animations"
    },
    "ngx-scanner-qrcode": {
      "@angular/common": "$@angular/common",
      "@angular/core": "$@angular/core",
      "@angular/animations": "$@angular/animations"
    },
    "@ng-bootstrap/ng-bootstrap": {
      "@angular/common": "$@angular/common",
      "@angular/core": "$@angular/core",
      "@angular/animations": "$@angular/animations",
      "@angular/forms": "$@angular/forms",
      "@angular/localize": "$@angular/localize"
    },
    "ngx-intl-tel-input": {
      "@angular/common": "$@angular/common",
      "@angular/core": "$@angular/core",
      "@angular/animations": "$@angular/animations",
      "@angular/forms": "$@angular/forms",
      "@angular/localize": "$@angular/localize",
      "intl-tel-input": "$intl-tel-input",
      "ngx-bootstrap": "$ngx-bootstrap"
    },
    "ng2-file-upload": {
      "@angular/common": "$@angular/common",
      "@angular/core": "$@angular/core"
    }
  }

[AngelCareaga]

@yomiex It seems that you are trying to implement the library directly in your component right, because I think you are missing to add the following, since require is not part of a global definition in your Angular project or you don't have the types.

[yomiex]

@AngelCareaga

The ts file has no issues, but I'm still getting this error when debugging from web. Was it working from your side?

[Hermoins]

@AngelCareaga @yomiex
I also have the same problem we want upgrade Angular16 but ng2-flatpickr is not support Ivy.
I see you repo that you have a fork to add feature to support Ivy.
How can I do to adopt new feature？
if I use command "npm install --save flatpickr ng2-flatpickr", I got was still the old version
Looking forward to your reply. Thank you very much

[AngelCareaga]

@yomiex please add your example to codesandbox or a similar page, so we can help you.

[AngelCareaga]

@Hermoins

Since my version is not integrated to this repository;

1. Download my version from GitHub.
2. Find the ng2-flatpickr folder, in your 'node_modules' folder and delete it.
3. From the downloaded version, copy the ng2-flatpickr folder from the 'dist' folder, to your 'node_modules' folder.

For the moment this is how it will be, maybe you will integrate this version in the future, if not I will publish it as a new dependency with their respective credits and integrate more features and issues of this repo.

[Hermoins]

@AngelCareaga
thanks you replay.
I think it will work in my local environment.
but if in my production environment, we use docker image to deploy front-end package, need use npm install to integrate dependence.

[AngelCareaga]

@Hermoins

Oh right, I see, well in that case you can do the steps during the build of your docker image using COPY and other commands.

After installing your dependencies, add the steps as I mentioned before but now in the image build.

[Hermoins]

@AngelCareaga
Thank you for your reply
You're right
But our company has integrated the standard CI process
It's difficult for me to modify it because of this issue
So I may still have to consider other solution

[AngelCareaga]

@Hermoins

Maybe this will work for you

https://github.com/mattlewis92/angularx-flatpickr

[AngelCareaga]

@Hermoins @yomiex

Ready, I have already updated and published the dependency here, I hope you find it useful, if you need anything tell me in issues over there.

At the moment I have only tested with version 17 of Angular, if you need version 16, let me know.

ngx-flatpickr-wrapper

issues