search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.73k forks source link

tree: does not work with angular v9 #21529

Closed ThakkarKhushbu closed 3 years ago

ThakkarKhushbu commented 3 years ago

It was working fine with Angular version 6, after upgrade to Angular 9 , it stop works.

image

Below is package.json

{
  "name": "fuse",
  "version": "6.2.4",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json",
    "compodoc": "npx compodoc -p src/tsconfig.app.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.1.12",
    "@angular/cdk": "7.0.1",
    "@angular/common": "9.1.12",
    "@angular/compiler": "9.1.12",
    "@angular/core": "9.1.12",
    "@angular/flex-layout": "7.0.0-beta.19",
    "@angular/forms": "9.1.12",
    "@angular/material": "7.0.1",
    "@angular/material-moment-adapter": "6.3.3",
    "@angular/platform-browser": "9.1.12",
    "@angular/platform-browser-dynamic": "9.1.12",
    "@angular/router": "9.1.12",
    "@ng-bootstrap/ng-bootstrap": "5.0.0",
    "@ngrx/effects": "6.0.1",
    "@ngrx/router-store": "6.0.1",
    "@ngrx/store": "6.0.1",
    "@ngrx/store-devtools": "6.0.1",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "4.0.0",
    "@swimlane/dragula": "3.8.0",
    "@swimlane/ngx-charts": "8.1.0",
    "@swimlane/ngx-datatable": "13.0.1",
    "@swimlane/ngx-dnd": "4.0.0",
    "@types/c3": "0.6.0",
    "@types/d3": "5.0.0",
    "@types/d3-scale": "2.0.2",
    "@types/dragula": "2.1.34",
    "@types/prismjs": "1.9.0",
    "ag-grid": "18.1.2",
    "ag-grid-angular": "19.1.2",
    "ag-grid-community": "19.1.4",
    "angular-calendar": "0.25.2",
    "angular-in-memory-web-api": "0.6.0",
    "c3": "0.6.6",
    "chart.js": "2.7.2",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.7",
    "d3": "5.7.0",
    "d3-scale": "2.1.2",
    "dom-to-image": "2.6.0",
    "flag-icon-css": "3.3.0",
    "hammerjs": "2.0.8",
    "jquery": "3.3.1",
    "lodash": "4.17.10",
    "moment": "2.22.2",
    "ng-drag-drop": "5.0.0",
    "ng-pick-datetime": "6.0.16",
    "ng2-charts": "1.6.0",
    "ngrx-store-freeze": "0.2.4",
    "ngx-clipboard": "14.0.1",
    "ngx-color-picker": "6.5.0",
    "ngx-cookie-service": "10.1.1",
    "ngx-daterangepicker-material": "1.2.4",
    "ngx-material-timepicker": "2.9.0",
    "ngx-toastr": "13.1.0",
    "node-sass": "4.14.1",
    "perfect-scrollbar": "1.4.0",
    "primeicons": "1.0.0",
    "prismjs": "1.15.0",
    "rxjs": "6.2.2",
    "rxjs-compat": "6.2.1",
    "sweetalert2": "7.33.1",
    "ts-md5": "1.2.4",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.12",
    "@angular/cli": "9.1.12",
    "@angular/compiler-cli": "9.1.12",
    "@angular/language-service": "9.1.12",
    "@angularclass/hmr": "2.1.3",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/lodash": "4.14.111",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.1",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "printd": "1.0.1",
    "protractor": "5.3.2",
    "ts-node": "5.0.1",
    "tslint": "5.9.1",
    "typescript": "3.8.3",
    "webpack-bundle-analyzer": "2.13.1"
  }
}
prasannavg commented 3 years ago

Can you try upgrading your angular cdk and material version to 9

Splaktar commented 3 years ago

Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.

I have transferred this issue to the correct repository for you.

Splaktar commented 3 years ago

As mentioned above, you need to update your version of Angular CDK and Material to v9. You should have already seen NPM peer dependency warnings telling you about this. Your current configuration (mixing v7 and v9) is not supported.

You can update with ng update @angular/material@9

ThakkarKhushbu commented 3 years ago

image

getting above error after upgrading CDK and material version

Splaktar commented 3 years ago

@ThakkarKhushbu it doesn't look like you ran ng update as I recommended above. This would have automatically fixed all of those imports for you. You can find out more detail about what needs to be updated in your project and why here: https://github.com/angular/components/blob/master/CHANGELOG.md#deprecations.

ThakkarKhushbu commented 3 years ago

I did Same ng update @angular/material@9

Package.json

{
  "name": "fuse",
  "version": "6.2.4",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json",
    "compodoc": "npx compodoc -p src/tsconfig.app.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.1.12",
    "@angular/cdk": "9.0.0",
    "@angular/common": "9.1.12",
    "@angular/compiler": "9.1.12",
    "@angular/core": "9.1.12",
    "@angular/flex-layout": "7.0.0-beta.19",
    "@angular/forms": "9.1.12",
    "@angular/material": "9.0.0",
    "@angular/material-moment-adapter": "6.3.3",
    "@angular/platform-browser": "9.1.12",
    "@angular/platform-browser-dynamic": "9.1.12",
    "@angular/router": "9.1.12",
    "@ng-bootstrap/ng-bootstrap": "5.0.0",
    "@ngrx/effects": "6.0.1",
    "@ngrx/router-store": "6.0.1",
    "@ngrx/store": "6.0.1",
    "@ngrx/store-devtools": "6.0.1",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "4.0.0",
    "@swimlane/dragula": "3.8.0",
    "@swimlane/ngx-charts": "8.1.0",
    "@swimlane/ngx-datatable": "13.0.1",
    "@swimlane/ngx-dnd": "4.0.0",
    "@types/c3": "0.6.0",
    "@types/d3": "5.0.0",
    "@types/d3-scale": "2.0.2",
    "@types/dragula": "2.1.34",
    "@types/prismjs": "1.9.0",
    "ag-grid": "18.1.2",
    "ag-grid-angular": "19.1.2",
    "ag-grid-community": "19.1.4",
    "angular-calendar": "0.25.2",
    "angular-in-memory-web-api": "0.6.0",
    "c3": "0.6.6",
    "chart.js": "2.7.2",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.7",
    "d3": "5.7.0",
    "d3-scale": "2.1.2",
    "dom-to-image": "2.6.0",
    "flag-icon-css": "3.3.0",
    "hammerjs": "2.0.8",
    "jquery": "3.3.1",
    "lodash": "4.17.10",
    "moment": "2.22.2",
    "ng-drag-drop": "5.0.0",
    "ng-pick-datetime": "6.0.16",
    "ng2-charts": "1.6.0",
    "ngrx-store-freeze": "0.2.4",
    "ngx-clipboard": "14.0.1",
    "ngx-color-picker": "6.5.0",
    "ngx-cookie-service": "10.1.1",
    "ngx-daterangepicker-material": "1.2.4",
    "ngx-material-timepicker": "2.9.0",
    "ngx-toastr": "13.1.0",
    "node-sass": "4.14.1",
    "perfect-scrollbar": "1.4.0",
    "primeicons": "1.0.0",
    "prismjs": "1.15.0",
    "rxjs": "6.2.2",
    "rxjs-compat": "6.2.1",
    "sweetalert2": "7.33.1",
    "ts-md5": "1.2.4",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.12",
    "@angular/cli": "9.1.12",
    "@angular/compiler-cli": "9.1.12",
    "@angular/language-service": "9.1.12",
    "@angularclass/hmr": "2.1.3",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/lodash": "4.14.111",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.1",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "printd": "1.0.1",
    "protractor": "5.3.2",
    "ts-node": "5.0.1",
    "tslint": "5.9.1",
    "typescript": "3.8.3",
    "webpack-bundle-analyzer": "2.13.1"
  }
}
Splaktar commented 3 years ago

It should have run the migrations to update your imports. You can try this to re-run the migrations:

ng update @angular/material --migrate-only --from=7 --to=9

ThakkarKhushbu commented 3 years ago

did it , errors gone but no result in tree

image

Splaktar commented 3 years ago

@ThakkarKhushbu it's hard to say without seeing the template, ideally in a StackBlitz or GitHub reproduction.

NayanMiyatra commented 3 years ago

@Splaktar this Sample code might help you to clarify the issue

https://github.com/NayanMiyatra/MatTreeSample/tree/master

ThakkarKhushbu commented 3 years ago

HI @Splaktar

any update on it please ? i am not able to upgrade angular version because of this material version issue

Splaktar commented 3 years ago

@Splaktar this Sample code might help you to clarify the issue

https://github.com/NayanMiyatra/MatTreeSample/tree/master

Neither @angular/material nor @angular/cdk are dependencies of this repo.

Splaktar commented 3 years ago

It also did not

I've converted it to a working StackBlitz. But I cannot reproduce the exception that you posted above.

angular-automatic-lock-bot[bot] commented 3 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.