Angular2无法实现材料设计

Question

正如问题的标题所述，我不能实现材料设计，尽管我应该遵循官方documentation。 我做了以下步骤：
npm install --save @angular/material
npm install --save @angular/animations
这是我的package.json文件：

"dependencies": {
    "@angular/animations": "^4.2.5",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6"
  },

所以一切都安装得很好但是现在我面临两个问题：
第一个是当我尝试导入BrowserAnimationsModule时，编译器无法找到动画模块：
第二个问题是，当我在NgModule中导入材料模块时，如下所示：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdButtonModule,
    MdMenuModule,
    MdCardModule,
    MdToolbarModule,
    MdIconModule
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我在控制台中收到此错误，以及一堆警告消息：

我在这里缺少什么？

Answer 1

Angular 4使用InjectionToken而不是Angular 2使用的OpaqueToken，当您在两者之间混合@angular依赖版本时，会出现一堆错误，指出{ {1}}无法找到。

我建议如果这是一个新项目，您可以通过从here下载Node.js来更新node / npm，然后按照以下步骤将Angular CLI更新为最新版本：

步骤1：运行此命令以卸载旧CLI

InjectionToken

第2步：全局安装CLI

npm uninstall -g @angular/cli
npm cache clean

如果这是一个很大的Angular 2项目，您可以按照this指南将其重构为Angular 4项目。

Answer 2

在你的package.json中，尝试替换  “@ angular / material”：“github：angular / material2-builds”，

与

 "@angular/material": "^2.0.0-beta.7",

你的@ angular / animations是版本^ 4.2.5，而其他模块@ angular / core，编译器等是版本2.4.0。尝试将这些更新到4.2.5

此外，尝试删除根文件夹中的node_modules并再次运行npm install。使用您提供的代码，其他一切似乎都很好。希望这有帮助