Angular4、材料和 Angular4答案

【问题标题】：Angular4, Materials and Angular4Angular4、材料和 Angular4
【发布时间】：2017-08-15 15:32:10
【问题描述】：

是否任何人都能够获得 Angular4、材质和动画（菜单所需）以使用 Visual Studio Code。

首先从 github 下载： git clone https://github.com/angular/quickstart.git

在VS Code中打开，编译运行，就可以了。

现在使用 NPM 安装 Material2 (2.0.0-beta.8)

现在导入角度动画

然后繁荣 - 没有任何东西可以编译，欢迎来到节点包地狱。

我还没有找到可以演示如何做到这一点的任何地方

帮助会很大。

更多信息

安装：

npm install --save @angular/material @angular/cdk

npm install --save @angular/animations

和systemjs.config

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
  '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',

  '@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
  '@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
  '@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'

** npm 启动**

错误（其中一些）

node_modules/@angular/material/typings/button-toggle/button-toggle.d.ts(32,22): error TS2420: Class 'MdButtonToggleGroup' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MdButtonToggleGroup'.
node_modules/@angular/material/typings/button-toggle/button-toggle.d.ts(32,50): error TS2507: Type '(new (...args: any[]) => CanDisable) & typeof MdButtonToggleGroupBase' is not a constructor function type.
node_modules/@angular/material/typings/button-toggle/button-toggle.d.ts(91,22): error TS2420: Class 'MdButtonToggleGroupMultiple' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MdButtonToggleGroupMultiple'.
node_modules/@angular/material/typings/button-toggle/button-toggle.d.ts(91,58): error TS2507: Type '(new (...args: any[]) => CanDisable) & typeof MdButtonToggleGroupBase' is not a constructor function type.
node_modules/@angular/material/typings/button/button.d.ts(55,22): error TS2420: Class 'MdButton' incorrectly implements interface 'CanColor'.
  Property 'color' is missing in type 'MdButton'.
node_modules/@angular/material/typings/button/button.d.ts(55,22): error TS2420: Class 'MdButton' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MdButton'.
node_modules/@angular/material/typings/button/button.d.ts(55,39): error TS2507: Type '(new (...args: any[]) => CanColor) & (new (...args: any[]) => CanDisable) & typeof MdButtonBase' is not a constructor function type.
node_modules/@angular/material/typings/checkbox/checkbox.d.ts(55,22): error TS2420: Class 'MdCheckbox' incorrectly implements interface 'CanColor'.

【问题讨论】：

我建议使用 Angular CLI 创建您的项目 - 快速启动项目不是很好，我认为他们在网站的最新更新中不再推荐它，转而支持 CLI .除此之外，如果您还没有阅读 Angular Material GitHub 上的 Getting Started 指南，我建议您阅读。
编译时遇到什么错误？您如何导入材质和动画？
让先生也安装材料 cdk，按照这个教程，它应该工作：github.com/angular/material2/blob/master/guides/…
@user2739963 使用此命令 npm-check-updates 将所有软件包更新到最新版本，然后输入 ncu -a。删除 Node_modules 文件夹并重新安装。这将解决问题

标签： angular animation

【解决方案1】：

请尝试此链接http://csharp-video-tutorials.blogspot.sg/2017/05/setting-up-angular-2-in-visual-studio.html，为您提供如何在 Visual Studio 中使用 Angular 的清晰方法。虽然是 Angular2 的，但是 Angular4 是一样的，没有变化

【讨论】：

【解决方案2】：

将可压缩的材质版本更新为角度版本。这将解决此问题。

【讨论】：