角度 - 从材料 5 升级到材料 7，无需 cli

Posted 2023-03-07

【中文标题】角度 - 从材料 5 升级到材料 7，无需 cli

【英文标题】：angular - upgrade from material 5 to material 7 without cli

【发布时间】：2019-05-23 13:00:03

【问题描述】：

我有一个复杂的 Angular 应用程序，除其他外，它是一个运行 Angular JS (1.6) 和 Angular (5.x) 的“混合”应用程序。 现在，我需要将 Material 版本 5.2.4 升级到最新 (7.x)。 我在 package.json 文件中发现与此目的相关的东西上运行了一些安装，但仍然无法正常工作。我收到此错误，例如：

Unhandled Promise rejection: Object(...) is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Object(...) is not a function

这来自“core.js”文件，所以我无法准确判断实际代码中的问题所在。

我已经运行了以下命令（现在没有 CLI）：

npm i --save @angular/material@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/animations@latest @angular/cdk@latest @angular/compiler@latest @angular/common@latest

这些装置本身运行良好。

我无法对我在应用程序中拥有的所有包运行这种更新，因为由于应用程序的性质，其中一些现在无法更新。

那么，我在这里遗漏了什么吗？我是否需要对更多（依赖）包运行更新？

这是整个软件包列表（包括“dev”）：

"dependencies": 
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.2.0",
    "@angular/common": "^7.1.4",
    "@angular/compiler": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/forms": "5.2.11",
    "@angular/material": "^7.2.0",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/router": "5.2.8",
    "@angular/upgrade": "5.2.8",
    "ag-grid": "17.1.1",
    "ag-grid-angular": "17.1.0",
    "ag-grid-enterprise": "17.1.1",
    "angular": "1.6.7",
    "angular-animate": "1.6.7",
    "angular-aria": "1.6.2",
    "angular-bootstrap": "0.12.2",
    "angular-daterangepicker": "0.2.2",
    "angular-file-upload": "2.5.0",
    "angular-immutable": "0.1.3",
    "angular-lz-string": "1.0.5",
    "angular-material": "1.1.8",
    "angular-material-data-table": "0.10.10",
    "angular-material-icons": "0.7.1",
    "angular-material-time-picker": "1.0.6",
    "angular-messages": "1.6.0",
    "angular-native-dragdrop": "1.2.2",
    "angular-post-message": "*",
    "angular-sanitize": "1.5.3",
    "angular-split": "1.0.0-rc.3",
    "angular-svg-round-progressbar": "0.4.8",
    "angular-timer": "1.3.3",
    "angular-toastr": "1.7.0",
    "angular-translate": "2.11.1",
    "angular-translate-loader-static-files": "2.11.1",
    "angular-translate-storage-local": "2.11.0",
    "angular-ui-calendar": "1.0.2",
    "angular-ui-router": "0.2.18",
    "angular-uuid": "0.0.4",
    "angulartics-piwik": "1.0.4",
    "bootstrap-daterangepicker": "2.1.30",
    "bootstrap-material-design-icons": "2.2.0",
    "canvg-fixed": "1.0.0",
    "circular-json": "0.3.1",
    "core-js": "2.4.1",
    "element-resize-detector": "1.1.14",
    "es6-collections": "0.5.6",
    "file-saver": "^1.3.3",
    "filesize": "3.6.1",
    "fullcalendar": "2.3.1",
    "hammerjs": "2.0.8",
    "howler": "^2.1.0",
    "html2canvas": "v1.0.0-alpha.9",
    "humanize-duration": "2.8.0",
    "immutable": "3.8.1",
    "jqcloud2": "2.0.2",
    "jquery": "2.2.1",
    "jspdf": "1.3.5",
    "kendo-grid-editors": "1.1.2",
    "linqts": "1.8.3",
    "lodash": "4.12.0",
    "memoize-one": "4.0.3",
    "moment": "2.12.0",
    "ng-idle": "1.3.1",
    "ng-password-strength": "0.3.0",
    "ng-stomp": "0.4.0",
    "ng2-ion-range-slider": "2.0.0",
    "ngx-img-cropper": "0.10.4",
    "ngx-pipes": "2.1.2",
    "papaparse": "4.3.3",
    "post-robot": "8.0.15",
    "quill": "1.2.6",
    "reduce-reducers": "0.1.2",
    "redux": "3.7.2",
    "redux-logger": "2.6.1",
    "redux-thunk": "2.1.0",
    "redux-undo": "1.0.0-beta9",
    "reflect-metadata": "0.1.3",
    "reselect": "3.0.1",
    "resize-observer-polyfill": "1.5.0",
    "rxjs": "5.5.6",
    "shelljs": "0.6.0",
    "stompjs": "2.3.3",
    "systemjs": "0.19.23",
    "tinymce": "4.7.10",
    "upath": "0.1.7",
    "zone.js": "0.8.19"
  ,
  "devDependencies": 
    "@compodoc/compodoc": "1.0.5",
    "@types/es6-promise": "0.0.32",
    "@types/howler": "^2.0.5",
    "@types/node": "8.10.15",
    "@types/webpack": "3.8.2",
    "@types/webpack-env": "1.13.3",
    "angular-mocks": "1.5.5",
    "awesome-typescript-loader": "3.4.1",
    "babel-loader": "7.1.2",
    "body-parser": "1.15.1",
    "bootstrap": "3.3.6",
    "clean-css": "4.0.7",
    "clean-webpack-plugin": "0.1.17",
    "codelyzer": "4.2.1",
    "connect-livereload": "0.5.4",
    "copy-webpack-plugin": "4.3.1",
    "cors": "2.8.4",
    "cross-env": "5.2.0",
    "css-loader": "0.28.8",
    "del": "2.2.2",
    "dummy-json": "1.0.1",
    "es6-module-loader": "0.17.11",
    "express": "4.13.4",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.4",
    "flag-icon-css": "2.3.0",
    "font-awesome": "4.6.3",
    "friendly-errors-webpack-plugin": "1.6.1",
    "fs-extra": "0.30.0",
    "gulp": "3.9.1",
    "gulp-autoprefixer": "3.1.1",
    "gulp-clean-css": "2.0.6",
    "gulp-concat": "2.6.0",
    "gulp-copy": "1.0.1",
    "gulp-intercept": "0.1.0",
    "gulp-livereload": "3.8.1",
    "gulp-prettify": "0.4.0",
    "gulp-rename": "1.4.0",
    "gulp-replace": "0.5.4",
    "gulp-sass": "3.1.0",
    "gulp-war": "0.1.4",
    "gulp-watch-sass": "1.4.0",
    "gulp-zip": "4.0.0",
    "handlebars-loader": "1.6.0",
    "hard-source-webpack-plugin": "0.12.0",
    "html-loader": "0.5.4",
    "html-webpack-harddisk-plugin": "0.1.0",
    "html-webpack-plugin": "2.30.1",
    "http-proxy-middleware": "0.17.3",
    "increase-memory-limit": "1.0.6",
    "jasmine-reporters": "2.0.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "0.13.22",
    "karma-chrome-launcher": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-jasmine-matchers": "2.0.2",
    "karma-mocha-reporter": "2.0.3",
    "karma-systemjs": "0.13.0",
    "livereload-js": "2.2.1",
    "mdi": "1.8.36",
    "mkdirp": "0.5.1",
    "multer": "1.2.1",
    "npm-run-all": "4.1.2",
    "open": "0.0.5",
    "protractor": "5.3.0",
    "protractor-beautiful-reporter": "1.1.1",
    "protractor-flake": "3.0.2",
    "protractor-http-mock": "0.9.0",
    "protractor-jasmine2-html-reporter": "0.0.7",
    "q": "1.4.1",
    "raw-loader": "0.5.1",
    "request": "2.69.0",
    "rimraf": "2.6.2",
    "run-sequence": "2.2.0",
    "sass-loader": "6.0.6",
    "selfsigned": "1.10.1",
    "shelljs": "0.6.0",
    "socket.io": "1.4.6",
    "style-loader": "0.18.2",
    "system-text": "0.1.0",
    "systemjs-builder": "0.16.0",
    "systemjs-plugin-css": "0.1.32",
    "systemjs-plugin-json": "0.3.0",
    "through2": "2.0.1",
    "to-string-loader": "1.1.5",
    "tree-kill": "1.2.0",
    "ts-loader": "2.3.7",
    "tslint": "5.9.1",
    "tslint-loader": "3.5.3",
    "typescript": "2.6.2",
    "typings": "1.3.x",
    "uglifyjs-webpack-plugin": "1.1.6",
    "url-loader": "0.5.9",
    "uuid": "3.1.0",
    "vash": "0.11.3",
    "webpack": "3.12.0",
    "webpack-dev-server": "2.10.1",
    "webpack-merge": "4.1.1",
    "yargs": "6.6.0"
  

如果最终这是该应用程序中特定的问题，并且只能在我们的开发团队内部解决，那当然也是一个答案。在得出这个结论之前，我只是想确保我没有在这里遗漏“全球知名”的东西......

【问题讨论】：

still things are not working correctly，什么样的事情？

@selemmn - 你是对的，没有扩展这句话。现在编辑问题...

【参考方案1】：

要从一个 Angular 版本升级到另一个 Angular 版本，您应该使用他们的升级指南。

https://update.angular.io/

选择当前和新的 Angular 版本，并确保将应用复杂性设置为高级，这样您就不会跳过任何步骤。您可以使用复选框来验证是否每个步骤都已完成。

请注意，建议一次只升级一个主要版本。

上个月我从 angular 4 升级到 7，这个指南对我帮助很大！

【讨论】：

我的目标不是在应用程序中升级 Angular 本身。正如我在问题中提到的，这是一个混合应用程序，同时运行 Angular JS (1.6) 和 Angular (5)。我只询问升级此应用程序中的材料包 - 从版本 5.2.4（5.x 中的最新版本）到版本 7（7.x 中的最新版本）...

我建议您保持 Angular (5) 代码版本和 Angular Material 版本同步。不同的版本会导致问题。对 Angular 5 的支持也将很快放弃。 angular.io/guide/releases#support-policy-and-schedule

【参考方案2】：

最终，问题在于 Angular (5) 的版本与我尝试安装的 Material 的版本 (7) 之间的差异。 这些版本应该是同步的。