Can we get the 3.x version to work with Angular 10 ?

[puneetg1983]

Hello Team - We are using this library successfully in our project which is using Angular8. Now we have a need to migrate to Angular10 because we want to leverage some other nugget packages that require Angular10 as minimum.

Unfortunately I could not get this library to work with Angular10 and I am battling this for quite a few days. Here is the relevant package.json file configuration.

"dependencies": {
    "@angular-react/core": "3.0.0",
    "@angular-react/fabric": "3.0.0",
    "@angular/animations": "^10.2.5",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "10.2.5",
    "@angular/compiler": "10.2.5",
    "@angular/core": "10.2.5",
    "@angular/forms": "10.2.5",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "10.2.5",
    "@angular/platform-browser-dynamic": "10.2.5",
    "@angular/router": "10.2.5",
    "@angular/upgrade": "10.2.5",
    "@microsoft/applicationinsights-web": "^2.5.4",
    "@ng-select/ng-select": "^5.0.15",
    "@types/highcharts": "^7.0.0",
    "@types/react": "~16.8.6",
    "@types/react-dom": "^16.8.6",
    "@uifabric/azure-themes": "7.3.0",
    "adal-angular4": "^3.0.16",
    "admin-lte": "^2.4.3",
    "angular-split-ng6": "^1.0.0-rc.5",
    "bootstrap": "^3.4.1",
    "classnames": "^2.3.1",
    "copy-html-to-clipboard": "^4.0.1",
    "core-js": "^3.6.5",
    "css-to-style": "^1.4.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "highcharts": "^8.1.2",
    "highcharts-angular": "^2.4.0",
    "highcharts-custom-events": "^3.0.9",
    "ie-shim": "^0.1.0",
    "jquery": "^3.4.1",
    "moment": "^2.22.1",
    "monaco-languageclient": "^0.13.0",
    "office-ui-fabric-core": "11.0.0",
    "office-ui-fabric-react": "7.132.0",
    "pdfmake": "^0.1.72",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "reconnecting-websocket": "^4.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "6.6.7",
    "rxjs-compat": "6.2.2",
    "sass": "^1.54.4",
    "stylenames": "^1.1.6",
    "tslib": "^2.0.0",
    "ua-parser-js": "^0.7.19",
    "vis": "^4.21.0",
    "vscode-ws-jsonrpc": "^0.2.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "8.0.2",
    "@angular-devkit/build-angular": "~0.1002.4",
    "@angular-devkit/build-ng-packagr": "~0.1002.4",
    "@angular-devkit/build-optimizer": "~0.800.3",
    "@angular/cli": "10.2.4",
    "@angular/compiler-cli": "10.2.5",
    "@angular/language-service": "^10.2.5",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^12.11.1",
    "@types/ua-parser-js": "^0.7.32",
    "@types/vscode": "1.67.0",
    "awesome-typescript-loader": "^2.2.1",
    "codelyzer": "^5.1.2",
    "concurrently": "^4.1.0",
    "jasmine": "^3.0.0",
    "jasmine-core": "~3.5.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^10.1.0",
    "protractor": "~7.0.0",
    "rxjs-tslint": "^0.1.3",
    "selfsigned": "^1.10.2",
    "ts-node": "~4.1.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.8",
    "webpack-bundle-analyzer": "^3.6.0"
  }

May I know the right combination of the libraries to use to make it work with Angular10?

This is the error I get when I try to run with Angular10

TypeError: Cannot read properties of undefined (reading 'nativeElement')    
at FabPrimaryButtonComponent.set (https://localhost:3000/vendor.js:240061:41)    
at Object.ngOnChangesSetInput [as setInput] (https://localhost:3000/vendor.js:116112:25)    
at setInputsFromAttrs (https://localhost:3000/vendor.js:123461:13)    
at instantiateAllDirectives (https://localhost:3000/vendor.js:123199:7)    
at createDirectivesInstances (https://localhost:3000/vendor.js:122484:3)    
at Module.ɵɵelementStart (https://localhost:3000/vendor.js:131388:5)   
 at FabricFeedbackComponent_Template (https://localhost:3000/main.js:75213:73)    
at executeTemplate (https://localhost:3000/vendor.js:122452:5)    
at renderView (https://localhost:3000/vendor.js:122189:7)    
at renderComponent (https://localhost:3000/vendor.js:123684:3)    
at renderChildComponents (https://localhost:3000/vendor.js:122043:5)   
 at renderView (https://localhost:3000/vendor.js:122223:7)    
at renderComponent (https://localhost:3000/vendor.js:123684:3)    
at renderChildComponents (https://localhost:3000/vendor.js:122043:5)    
at renderView (https://localhost:3000/vendor.js:122223:7)]

This is the line of code from the browser tools window.