Angular Material项目无法在Angular 4中编译

我正试图编译我的Angular 4项目。我跟踪了“”中的Angular Material的安装，并在app.module.ts中包含了依赖项。当我试图编译该项目时，我收到了以下提到的警告和错误：

ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/rxjs/Subject.d.ts (16,22): Class 'Subject<T>' incorrectly e
xtends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<
R>'.
      Type 'Observable<T>' is not assignable to type 'Observable<R>'.
        Type 'T' is not assignable to type 'R'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,10): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Directionality'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,26): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DIRECTIONALITY_PROVI
DER'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,51): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DIR_DOCUMENT'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,65): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Direction'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,76): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Dir'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,81): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'BidiModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,10): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Portal'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,18): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PortalHost'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,30): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'BasePortalHost'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,46): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ComponentPortal'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,63): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'TemplatePortal'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal-directives.d.t
s (8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Templa
tePortalDirective'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal-directives.d.t
s (8,35): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Portal
HostDirective'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal-directives.d.t
s (8,56): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Portal
Module'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/dom-portal-host.d.ts
(8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DomPorta
lHost'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/platform/platform.d.ts (8,10
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Platform'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/platform/features.d.ts (8,10
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'getSupportedI
nputTypes'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/platform/index.d.ts (8,10):
Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PlatformModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'AriaLivePol
iteness'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
30): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LIVE_ANNOUN
CER_ELEMENT_TOKEN'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
60): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LiveAnnounc
er'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
75): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LIVE_ANNOUN
CER_PROVIDER_FACTORY'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
108): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LIVE_ANNOU
NCER_PROVIDER'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,10):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrap'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,21):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrapFactor
y'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,39):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrapDeprec
atedDirective'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,69):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrapDirect
ive'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/interactivity-checker.d
.ts (8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Inte
ractivityChecker'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/fake-mousedown.d.ts (8,
10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'isFakeMouse
downFromScreenReader'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/index.d.ts (8,10): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'A11yModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,10
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'UP_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,20
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DOWN_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,32
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'RIGHT_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,45
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LEFT_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,57
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PAGE_UP'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,66
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PAGE_DOWN'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,77
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'HOME'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,83
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'END'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,88
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ENTER'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,95
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'SPACE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,10
2): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'TAB'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,10
7): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ESCAPE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,11
5): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'BACKSPACE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,12
6): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DELETE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,10): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'coerceBooleanProperty'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,33): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'coerceNumberProperty'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,55): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ObserveContentModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,77): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ObserveContent'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/list-key-manager.d.ts (
8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CanDisabl
e'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/list-key-manager.d.ts (
8,22): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ListKeyMa
nager'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/sort/sort-header.d.ts (11,10): Mo
dule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkColumnDef'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/cell.d.ts (9,10): Module '"
C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkCell'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/cell.d.ts (9,19): Module '"
C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkColumnDef'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/cell.d.ts (9,33): Module '"
C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkHeaderCell'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/table.d.ts (1,10): Module '
"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkTable'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/row.d.ts (1,10): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkHeaderRow'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/row.d.ts (1,24): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkRow'.
ERROR in BidiModule is not an NgModule

以下是app.module.ts的外观：

从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从'@angular/forms'导入{FormsModule}；
从'@angular/forms'导入{ReactiveFormsModule}；
从'@angular/http'导入{HttpModule}；
从“./app routing.module”导入{AppRoutingModule}；
从“./app.component”导入{AppComponent}；
从“@angular/router”导入{RouterModule}”；
从“./components/navbar/navbar.component”导入{NavbarComponent}；
从“./components/home/home.component”导入{HomeComponent}；
从“./components/dashboard/dashboard.component”导入{DashboardComponent}；
从“@angular/platform browser/animations”导入{BrowserAnimationsModule}；
//从“@angular/material”导入{MaterialModule}；
从“@angular/material”导入{MdButtonModule、MdCardModule、MdMenuModule、MdToolbarModule、MDConModule}；
输入"hammerjs";；
@NGD模块({
声明：[
应用组件，
导航组件，
HomeComponent，
仪表板组件，
],
进口：[
浏览器模块，
HttpModule，
反应形式模块，
FormsModule，
批准模块，
浏览动画模块，MdButtonModule，
MdMenuModule，
MdCardModule，
MDM模块，
MDICON模块
//MdInputModule，
//MdButtonModule，
//RouterModule.forRoot([
//{路径：'home'，组件：HomeComponent}，
//{路径：'dashboard'，组件：DashboardComponent}
// ])
],
提供者：[]，
引导：[AppComponent]
})
导出类AppModule{}

我遇到了这个问题-我仍在寻找答案

此外，上面的最新评论（8月29日）指出，不要将cdk构建与最新的材料混合使用——该声明与材料站点本身存在直接冲突。“安装说明”状态包括：

npm安装--保存角度/材质2构建角度/cdk构建 请提供我们偏离材料团队明确说明的原因

谢谢

将所有导入的前缀从MdButtonModule更改为MatButtonModule。 剩下的应该是这样的：

导入{MatCheckboxModule，MatAutocompleteModule， MatSlideToggleModule、MatButtonModule、MatFormFieldControl、， MatIconModule、MatInputModule、MatSelectModule、MatSortModule、， 来自“@angular/material”的MatDatepickerModule、DateAdapter、MatChipsModule}

---

我遇到了这个问题，我尝试将@angular/cdk和@angular/material安装为同一版本。问题已解决。

在windows中安装Angular 4

从nodejs站点运行环境下载安装nodejs安装程序。并使用以下命令检查计算机上是否安装了节点：node-v

从Git站点下载Git Bash安装程序

然后使用以下命令安装CLI:npm install-g@angular/CLI

然后在任何驱动器中创建一个文件夹

打开git bash命令提示符，并使用：cd foldername移动到创建的文件夹

现在，使用以下命令在该文件夹中创建一个新项目：ng new projectname，并使用以下命令移动到该文件夹：cd projectname

现在使用以下命令检查安装的angular版本：ng-v

现在您可以看到Angular2已安装，您可以运行以下命令将Gdade升级到angular4 仅适用于windows：npm安装@angular/common@next@棱角/compiler@next@angular/compiler-cli@next@棱角/core@next@棱角/forms@next@棱角/http@next@角度/平台-browser@next@角度/平台浏览器-dynamic@next@角度/平台-server@next@棱角/router@next@棱角/animations@next--保存

或者您可以转到这个url，找到installing RC.1，然后复制该命令

还要确保您有Typescript 2.1.6或更高版本，如果没有，则使用此命令更新Typescript:npm安装typescript@2.2.1--保存

然后再次使用这个cmmand:ng-v检查角度版本，它将显示角度版本4

使用以下命令安装NPM angular core:NPM Install-g@angular/core

之后，使用以下命令安装typescript文件夹：npm install-g typescript

现在您可以使用以下命令来checnpm版本：NPM-v

现在您可以使用以下命令运行angular 4项目：ng serve

---

我想你应该使用

@angular/material2

，对吗？我以为

@angular/material

是为AngularJS设计的。查看他链接的网站，它是正确的版本。当我尝试在末尾添加2时，它向我显示错误为“[ts]找不到模块'@angular/material2'。此外，在Angular Material菜单的API参考文档中，我们将其作为材料“从'@Angular/Material'@Angular/Material'@Angular/Material导入{MdMenuModule}”：“2.0.0-beta.8”确实正确是的，这对我很有效“npm安装@Angular/material@2.0.0-beta.2--保存“ npm install --save angular/material2-builds angular/cdk-builds