Cannot read properties of undefined (reading 'Directive') #388
Description
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"]
}