未能安装角材料 2答案

【问题标题】：failing to install angular material 2未能安装角材料 2
【发布时间】：2017-10-09 14:16:09
【问题描述】：

我是 Angular 2 和 Material 的新手。我已经安装了 Ang2 - 使用 ang-cli，现在我正在尝试获得一个基本的材料“Hello World”。

我在这里关注他们的安装： https://github.com/angular/material2/blob/master/guides/getting-started.md 我在第 2 步。

我已经 npm 安装了动画，但我不确定如何添加引用。

它没有说明在哪里添加该代码块，所以我将它添加到 app.module.ts 文件中，因此：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
// added:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; // added


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule // added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// added
@NgModule({ 
    imports: [BrowserAnimationsModule],
})
export class PizzaPartyAppModule { }

所以，我在执行此操作时遇到了一些错误。

@angular/platform-browser/animations 告诉我（带有红色波浪下划线）它'找不到模块 '@angular/platform-browser/animations''

我查看了我的文件夹结构，发现了这个：

@角
- 动画
- 平台浏览器
- - （此处没有动画文件夹）

所以我将 @angular/platform-browser/animations 更改为 @angular/animations

现在 BrowserAnimationsModule 告诉我（带有红色波浪下划线）Module angular/animations/animations 没有导出的成员 BrowserAnimationsModule。

我不确定它想要什么。

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

不久前我遇到了类似的问题。我的问题源于我使用的是 Angular Material 2，它依赖于 Angular 4。Angular 4 从其核心中删除了动画模块以提高效率。这似乎有问题。您可能希望将您的项目从 Angular 2 更新到 Angular 4（这并不像听起来那样破坏应用程序）。我认为这将解决您的问题。

【讨论】：

【解决方案2】：

你说你已经“安装了Ang2”。如果是这种情况，2.0.0-beta.2 之后的任何材料发布都将不适用于 Angular 2。您可以阅读下面的 beta.3 材料的更新日志。

https://github.com/angular/material2/blob/master/CHANGELOG.md

要让材料与 Angular 2.x.x 一起使用，您必须安装 beta.2 版本。

npm install @angular/material@2.0.0-beta.2 --save

然后，转到您的 app.module.ts，导入 Material Module 并将其添加到导入数组中。

import { MaterialModule } from '@angular/material';
@NgModule({
   imports: [
     MaterialModule
   ]
})

如果您已经安装了 Angular 4，那么按照入门指南，您就走上了正确的道路。我建议再次运行这些步骤：

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

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    ...
    imports: [BrowserAnimationsModule, NoopAnimationsModule],
    ...
  })

无论您决定使用哪种材料组件，也需要导入。

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
    ...
    imports: [BrowserAnimationsModule, 
              NoopAnimationsModule, 
              MdButtonModule, 
              MdCheckboxModule
             ],
    ...
    })

如果有帮助，请告诉我。

【讨论】：