时间戳

首页 > 解决方案 > 材料控制的角度版本问题

javascript - 材料控制的角度版本问题

问题描述

我的应用程序在材料库中运行良好，但现在突然出现构建错误。我的 typescript 版本、CLI 版本和材料库之间似乎有些混淆。我一直在绕圈子，而且对角度仍然很陌生，所以当我尝试阅读我遇到的这些错误时，我很难理解事情的意义。下面是我的 ng--version 和 ng build 命令的输出。提供的任何帮助或指导将不胜感激。

——杰森

在此处输入图像描述

错误：node_modules/@angular/material/tabs/tab.d.ts:24:22 - 错误 TS2420：“MatTab”类错误地实现了“CanDisable”接口。“MatTab”类型中缺少属性“禁用”，但在“CanDisable”类型中是必需的。

24 export declare class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy { ~~~~~~

node_modules/@angular/material/core/common-behaviors/disabled.d.ts:12:5 12 禁用：布尔值；~~~~~~~~ 这里声明了'disabled'。

错误：node_modules/@angular/material/toolbar/toolbar.d.ts:22:22 - 错误 TS2420：“MatToolbar”类错误地实现了“CanColor”接口。“MatToolbar”类型缺少“CanColor”类型的以下属性：颜色、默认颜色

22 export declare class MatToolbar extends _MatToolbarMixinBase implements CanColor, AfterViewInit { ~~~~~~~~~~

错误：node_modules/@angular/material/tree/node.d.ts:17:22 - 错误 TS2420：类 'MatTreeNode<T, K>' 错误地实现了接口 'CanDisable'。“MatTreeNode<T, K>”类型中缺少属性“禁用”，但在“CanDisable”类型中是必需的。

17 export declare class MatTreeNode<T, K = T> extends _MatTreeNodeMixinBase<T, K> implements CanDisable, DoCheck, HasTabIndex, OnInit, OnDestroy { ~~~~~~~~~~~~

node_modules/@angular/material/core/common-behaviors/disabled.d.ts:12:5 12 禁用：布尔值；~~~~~~~~ 这里声明了'disabled'。

错误：node_modules/@angular/material/tree/node.d.ts:17:22 - 错误 TS2420：类 'MatTreeNode<T, K>' 错误地实现了接口 'HasTabIndex'。“MatTreeNode<T, K>”类型缺少“HasTabIndex”类型的以下属性：tabIndex、defaultTabIndex

17 export declare class MatTreeNode<T, K = T> extends _MatTreeNodeMixinBase<T, K> implements CanDisable, DoCheck, HasTabIndex, OnInit, OnDestroy { ~~~~~~~~~~~~

错误：node_modules/zone.js/dist/zone.js.d.ts:600:21 - 错误 TS2503：找不到命名空间“NodeJS”。

600 声明 var global: NodeJS.Global; ~~~~~~

标签： javascriptnode.jsangulartypescriptangular-material

解决方案

如果您的代码存储库得到维护（GIT），那么我会尝试查看它的历史记录，并在出现错误之前查看那里安装的所有依赖项 + devDependencies。在继续之前，我会进行一个新的提交，以便您可以在修复版本期间出现故障时恢复并且仍然拥有新开发的代码。

从图像上看，一些 v11 和 v12 角度包似乎混合在一起。在语义版本控制中，它意味着重大变化。在 Angular 的情况下，所有 @angular 范围的包都具有类似的版本。这有助于识别兼容的软件包。所以 V11 包可能与 V12 包不兼容。

然后你应该解决所有包以与你的版本兼容，我假设你的应用程序是围绕 Angular V11 构建的。要查找兼容的包版本，您可以访问 npmjs.com 并查找每个包名称。在版本选项卡中，您可以看到所有可用选项。如果不明显哪个版本兼容，那么npm i错误的包版本应该用一些“对等依赖安装缺失”消息来唠叨它。

Angular V11.0.7 包依赖项应该如下所示：

"dependencies": {
  "@angular/animations": "~11.0.7",
  "@angular/common": "~11.0.7",
  "@angular/compiler": "~11.0.7",
  "@angular/core": "~11.0.7",
  "@angular/forms": "~11.0.7",
  "@angular/platform-browser": "~11.0.7",
  "@angular/platform-browser-dynamic": "~11.0.7",
  "@angular/router": "~11.0.7",
  "rxjs": "~6.6.0",
  "tslib": "^2.0.0",
  "zone.js": "~0.10.2"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.1100.7",
  "@angular/cli": "~11.0.7",
  "@angular/compiler-cli": "~11.0.7",
  "@types/jasmine": "~3.8.0",
  "@types/node": "^12.11.1",
  "codelyzer": "^6.0.0",
  "jasmine-core": "~3.8.0",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~5.1.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage": "~2.0.3",
  "karma-jasmine": "~4.0.0",
  "karma-jasmine-html-reporter": "^1.5.0",
  "protractor": "~7.0.0",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",
  "typescript": "~4.0.2"
}

我在您的清单中看到的那些其他包ng --version可能应该在 package.json 依赖项中：

"@angular/cdk": "~11.0.4"
"@angular/flex-layout": "~11.0.0-beta.33"
"@angular/material": "~11.0.4"

您也可以尝试删除node_modules目录并使用npm i. 有时它会有所帮助。并尝试删除 package-lock.json，它npm i也会生成，但由于某种原因不推荐。

如果问题仍然存在，则可能与全局包有关。然后我更愿意将您的一些 package.json 脚本转换为使用本地包，例如：

"scripts": {
  "old-start": "ng serve",
  "new-start": "npx ng serve",
  "alternative": "./node_modules/.bin/ng serve",
}

在较新的 npm 上这应该不是问题，但如果 npm 较旧，它可能会有所帮助。

推荐阅读