Cannot read properties of undefined (reading 'Directive')

[TheUnknown085]

I am getting this error after I upgraded my nx angular app from 11 to 15 and @angular-slider/ngx-slider from "^2.0.3" to "^15.0.1".

ERROR Error: Uncaught (in promise): Error: Cannot read properties of undefined (reading 'Directive')
  Evaluating http://localhost:5000/shared.js
  Loading http://localhost:5000/shared.js
TypeError: Cannot read properties of undefined (reading 'Directive')
    at ./node_modules/@angular-slider/ngx-slider/fesm2020/angular-slider-ngx-slider.mjs (angular-slider-ngx-slider.mjs:551:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at ./libs/shared/src/lib/grid/components/dummy-one.component.ts (dummy-two.component.ts:69:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at ./libs/shared/src/index-ng.ts (universalModuleDefinition:11:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at ./libs/shared/src/index.ts (index-ng.ts:391:1)
    at __webpack_require__ (bootstrap:24:1)
    at eval (startup:6:1)
    at eval (startup:6:1)
    at i (nmp-loader.umd.js:4:41792)
    at j (nmp-loader.umd.js:4:7589)

Line 551 of angular-slider-ngx-slider.mjs file

SliderElementDirective.ɵfac = i0.ɵɵngDeclareFactory({
    minVersion: "12.0.0",
    version: "15.2.10",
    ngImport: i0,
    type: SliderElementDirective,
    deps: [{
        token: i0.ElementRef
    }, {
        token: i0.Renderer2
    }, {
        token: i0.ChangeDetectorRef
    }],
    target: i0.ɵɵFactoryTarget.Directive
});

Here is my package.json snippet

{
  "dependencies": {
    "@angular-slider/ngx-slider": "^15.0.1",
    "@angular/animations": "15.2.9",
    "@angular/cdk": "15.2.9",
    "@angular/common": "15.2.9",
    "@angular/compiler": "15.2.9",
    "@angular/core": "15.2.9",
    "@angular/forms": "15.2.9",
    "@angular/platform-browser": "15.2.9",
    "@angular/platform-browser-dynamic": "15.2.9",
    "@angular/router": "15.2.9",
    "@ngrx/effects": "15.3.0",
    "@ngrx/router-store": "15.3.0",
    "@ngrx/store": "15.3.0",
    "@types/html2canvas": "^0.0.35",
    "ag-grid-angular": "19.1.2",
    "ag-grid-community": "19.1.4",
    "ag-grid-enterprise": "19.1.4",
    "core-js": "^3.6.5",
    "d3": "^5.7.0",
    "document-register-element": "1.13.1",
    "fastdom": "^1.0.9",
    "file-saver": "2.0.1",
    "font-awesome": "^4.7.0",
    "html2canvas": "^1.4.1",
    "jspdf": "^1.5.3",
    "lodash": "^4.17.10",
    "lodash.includes": "^4.3.0",
    "lodash.sortby": "^4.7.0",
    "moment": "2.22.2",
    "moment-timezone": "0.5.28",
    "ng2-search-filter": "^0.5.1",
    "ngx-pagination": "^3.2.1",
    "oidc-client": "1.10.1",
    "pdfmake": "^0.1.71",
    "rxjs": "~7.5.0",
    "sockjs-client": "^1.6.1",
    "tippy.js": "^5.2.0",
    "tslib": "^2.3.0",
    "uniqid": "^5.4.0",
    "url-polyfill": "^1.1.8",
    "url-search-params-polyfill": "^8.1.0",
    "uuid": "^8.0.0",
    "xlsx": "0.14.3",
    "zone.js": "0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "15.2.9",
    "@angular-devkit/build-webpack": "0.1502.9",
    "@angular-devkit/core": "15.2.9",
    "@angular-devkit/schematics": "15.2.9",
    "@angular-eslint/eslint-plugin": "14.0.4",
    "@angular-eslint/eslint-plugin-template": "14.0.4",
    "@angular-eslint/template-parser": "14.0.4",
    "@angular/compiler-cli": "15.2.9",
    "@angular/language-service": "15.2.9",
    "@angularclass/hmr": "^3.0.0",
    "@babel/core": "7.9.6",
    "@babel/preset-env": "7.9.6",
    "@babel/preset-typescript": "7.9.0",
    "@ipreo/nmp-cli": "1.0.0-beta.0",
    "@ngrx/store-devtools": "15.3.0",
    "@ngtools/webpack": "^15.0.0",
    "@nrwl/angular": "15.9.7",
    "@nrwl/cli": "15.9.7",
    "@nrwl/cypress": "15.9.7",
    "@nrwl/eslint-plugin-nx": "15.9.7",
    "@nrwl/jest": "15.9.7",
    "@nrwl/js": "15.9.7",
    "@nrwl/linter": "15.9.7",
    "@nrwl/node": "15.9.7",
    "@nrwl/web": "15.9.7",
    "@nrwl/workspace": "15.9.7",
    "@schematics/angular": "15.2.9",
    "@types/d3": "^5.7.1",
    "@types/file-saver": "~2.0.0",
    "@types/hammerjs": "2.0.36",
    "@types/jest": "29.4.4",
    "@types/jquery": "3.3.38",
    "@types/jspdf": "^1.3.3",
    "@types/lodash-es": "^4.17.2",
    "@types/moment-timezone": "0.5.13",
    "@types/node": "18.7.1",
    "@types/pdfmake": "^0.1.17",
    "@types/pendo-io-browser": "^2.16.2",
    "@types/signalr": "2.2.36",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "autoprefixer": "^9.8.6",
    "babel-jest": "29.4.3",
    "base64-inline-loader": "^1.1.1",
    "codelyzer": "6.0.1",
    "css-loader": "^5.0.1",
    "css-to-string-loader": "^0.1.3",
    "cypress": "3.1.0",
    "eslint": "7.17.0",
    "eslint-config-prettier": "7.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-teamcity": "^3.0.1",
    "fastdom": "^1.0.9",
    "fork-ts-checker-webpack-plugin": "^6.0.3",
    "jasmine-marbles": "0.8.4",
    "jest": "29.4.3",
    "jest-canvas-mock": "^2.3.0",
    "jest-environment-jsdom": "29.4.3",
    "jest-preset-angular": "13.0.0",
    "jest-slow-test-reporter": "^1.0.0",
    "lerna": "^3.22.1",
    "mini-css-extract-plugin": "^1.3.3",
    "ng-openapi-gen": "^0.21.2",
    "ng-packagr": "15.2.2",
    "ngrx-store-freeze": "0.2.4",
    "ngrx-store-localstorage": "^15.0.0",
    "nx": "15.9.7",
    "postcss": "^8.3.9",
    "postcss-import": "~14.1.0",
    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "7.5.0",
    "postcss-url": "10.1.3",
    "prettier": "2.8.8",
    "raw-loader": "^4.0.2",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "to-string-loader": "^1.1.6",
    "ts-jest": "29.0.5",
    "ts-loader": "^8.0.12",
    "ts-node": "10.9.1",
    "tsconfig-paths-webpack-plugin": "^4.1.0",
    "tsickle": ">=0.46.3",
    "tslib": "^2.3.0",
    "tslint": "6.1.3",
    "typescript": "4.9.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^5",
    "webpack-bundle-analyzer": "^4.3.0",
    "webpack-cli": "^5",
    "webpack-dev-server": "^4",
    "webpack-merge": "^5"
  }
}

Here is my tsconfig.app.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "sourceMap": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "declaration": false,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "importHelpers": true,
    "target": "ES2022",
    "module": "es2020",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2022", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "useDefineForClassFields": false,
    "baseUrl": ".",
    "paths": {
      "@company/folder1": ["libs/shared/src/index.ts"]
      // ...
    }
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": false,
    "allowEmptyCodegenFiles": true,
    "allowSyntheticDefaultImports": true,
    "enableIvy": true
  },
  "exclude": ["node_modules", "tmp", "support", "services"]
}

and here is the tsconfig.web-server.json code

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "dist/out-tsc",
    "target": "es2020",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": ["pendo-io-browser"],
    "lib": ["dom", "es2018"],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "**/test-setup.ts",
    "**/*.spec.ts",
    "**/__tests__/**",
    "**/*.mock.ts",
    "**/__mocks__/**"
  ],
  "include": ["libs/**/*.ts"]
}