Angular2 无法启用 material 设计

Question

正如问题标题中提到的，我无法启用 material 设计，尽管我遵循了官方 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 中导入 material 模块时：

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

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

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

我在这里错过了什么？

Answer 1

在你的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。使用您提供的代码，其他一切似乎都很好。希望这有帮助

Answer 2

Angular 4 使用 InjectionToken 而不是 Angular 2 使用的 OpaqueToken 并且当您在两者之间混合 @angular 依赖版本时你会收到一堆错误，指出找不到 InjectionToken。

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

第 1 步：运行此命令用于卸载旧 CLI

npm uninstall -g @angular/cli
npm cache clean

步骤 2：全局安装 CLI

npm install -g @angular/cli@latest

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

Angular2 无法启用 material 设计

Angular2 can't enable material design

angular-material2

angular