Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for Angular 12

See original GitHub issue

Steps to reproduce:

Using Angular 12 with version 5.5.0 for all packages.

    "@fullcalendar/angular": "~5.5.0",
    "@fullcalendar/core": "~5.5.0",
    "@fullcalendar/daygrid": "~5.5.0",
    "@fullcalendar/interaction": "~5.5.0",
    "@fullcalendar/list": "~5.5.0",
    "@fullcalendar/timegrid": "~5.5.0",

I’m having a real hard time trying to implement this I recently upgraded a old Angular 8 project to the most recent version of the stable Angular release and I had this perfectly integrated before with full functionality.

Upon updating, I was able to run the application but there was a lot of buggy behavior of course so I quickly updated the project I followed the V5 documents in the context of importing into app.module and later the component. The reason why this is confusing me is because in V5 we shouldnt have to import the **main.css files that were required once before in style.scss rather it’s supposed to be bundled but I am still receiving an error indicating it’s missing these? I don’t understand what’s going on here after investigating and looking at different options would appreciate some help, thank you

Build at: 2021-02-18T05:27:38.598Z - Hash: 67fb6e972eff4cd4c772 - Time: 2598ms

Error: ./node_modules/@fullcalendar/daygrid/main.css
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
Error: EISDIR: illegal operation on a directory, read

Error: ./node_modules/@fullcalendar/timegrid/main.css
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
Error: EISDIR: illegal operation on a directory, read

Error: ./node_modules/@fullcalendar/common/main.css
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
Error: EISDIR: illegal operation on a directory, read

Complete package.json found below

{
  "name": "front-end",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.0-next.0",
    "@angular/cdk": "~11.2.0",
    "@angular/common": "^12.0.0-0",
    "@angular/compiler": "~11.2.0",
    "@angular/core": "~12.0.0-next.0",
    "@angular/flex-layout": "~11.0.0-beta.33",
    "@angular/forms": "~12.0.0-next.0",
    "@angular/http": "^6.1.6",
    "@angular/material": "~11.2.0",
    "@angular/platform-browser": "~12.0.0-next.0",
    "@angular/platform-browser-dynamic": "~12.0.0-next.0",
    "@angular/platform-server": "~12.0.0-next.0",
    "@angular/router": "~12.0.0-next.0",
    "@auth0/angular-jwt": "^3.0.0",
    "@fullcalendar/angular": "~5.5.0",
    "@fullcalendar/core": "~5.5.0",
    "@fullcalendar/daygrid": "~5.5.0",
    "@fullcalendar/interaction": "~5.5.0",
    "@fullcalendar/list": "~5.5.0",
    "@fullcalendar/timegrid": "~5.5.0",
    "@google/maps": "^0.4.5",
    "@types/crypto-js": "^3.1.47",
    "@types/googlemaps": "^3.43.3",
    "@types/socket.io-client": "^1.4.35",
    "angular-bootstrap-md": "~10.1.1",
    "angular-calendar": "^0.25.2",
    "angular-custom-modal": "^1.2.0",
    "angular-material-fileupload": "^3.0.1",
    "angular-star-rating": "^4.0.0-beta.3",
    "angular2-calendar-heatmap": "~0.2.3",
    "angularx-flatpickr": "^6.5.2",
    "angularx-qrcode": "^2.3.5",
    "bootstrap": "^4.6.0",
    "bootstrap-material-design": "^4.1.3",
    "chart.js": "^2.9.4",
    "chartjs": "^0.3.24",
    "chartjs-plugin-annotation": "^0.5.7",
    "chartjs-plugin-datalabels": "^0.7.0",
    "core-js": "^2.6.12",
    "crypto-js": "^3.1.9-1",
    "css-loader": "^5.0.2",
    "css-star-rating": "^1.2.4",
    "echarts": "^4.9.0",
    "flatpickr": "^4.6.9",
    "font-awesome": "^4.7.0",
    "fullcalendar": "^5.5.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "moment": "^2.29.1",
    "ng-bootstrap": "^0.46.0",
    "ng-chat": "^1.2.0",
    "ng-starrating": "^1.0.20",
    "ng2-charts": "^2.4.2",
    "ng4-loading-spinner": "^1.1.3",
    "ngx-cookie-service": "^11.0.2",
    "ngx-echarts": "^5.2.2",
    "ngx-infinite-scroll": "^7.2.0",
    "ngx-moment": "^4.0.1",
    "ngx-smart-modal": "^7.4.1",
    "ngx-spinner": "^6.1.2",
    "package.json": "^2.0.1",
    "popper.js": "^1.12.9",
    "recordrtc": "^5.6.1",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.6.3",
    "socket.io-client": "^2.4.0",
    "webpack": "^4.46.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.0",
    "@angular/cli": "^11.2.0",
    "@angular/compiler-cli": "^11.2.0",
    "@angular/language-service": "^11.2.0",
    "@types/jasmine": "^2.8.17",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.5.5",
    "@types/node": "^10.17.51",
    "codelyzer": "^6.0.1",
    "eslint": "~7.20.0",
    "jasmine-core": "^3.6.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^6.1.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.5.4",
    "ng-packagr": "^11.2.1",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.6",
    "postcss-loader": "^5.0.0",
    "protractor": "^7.0.0",
    "rxjs-tslint": "~0.1.8",
    "ts-node": "~4.1.0",
    "typescript": "~4.1.5"
  }
}