Question

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

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

我已经安装了动画，但我不确定如何添加参考。

它没有说明添加该代码块的位置，因此我将其添加到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
- 动画
- 平台浏览器
- - （此处没有动画文件夹）

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

现在，BrowserAnimationsModule告诉我（带有红色波浪形下划线）模块角度/动画/动画没有导出成员BrowserAnimationsModule 。

我不确定它想要什么。

Answer 1

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

Answer 2

你说你已经安装了＆＃34; Ang2＆＃34;。如果是这种情况，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并将其添加到imports数组中。

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
             ],
    ...
    })

如果有帮助，请告诉我。

未能安装角材料2

2 个答案: