在Visual Studio 2017中为Angular 2配置Angular Material类型定义及问题排查

先理清楚几个核心问题，一步步帮你解决：

1. Angular Material版本适配与AngularJS组件库的区别 #

• 你安装的@angular/material和@angular/cdk确实是为Angular 2+设计的，而https://material.angularjs.org对应的是AngularJS（1.x）的Material组件库，两者完全不兼容，不能混用。
• 注意：最新版本的@angular/material已经不再支持Angular 2，你需要安装适配Angular 2的特定版本。执行以下命令安装兼容包：

  npm install --save @angular/material@2.0.0-beta.12 @angular/cdk@2.0.0-beta.12
  

  这个beta版本是专门适配Angular 2的稳定版本。

2. 类型定义的注册问题 #

Angular 2+的组件库（包括Material）已经自带类型定义，不需要手动复制到Scripts\typings目录。你只需要在tsconfig.json中确保编译器能找到这些类型：

• 打开你的tsconfig.json，在compilerOptions里添加或调整typeRoots，包含@angular/material和@angular/cdk的类型路径：

  {
    "compilerOptions": {
      // 其他已有配置...
      "typeRoots": [
        "./node_modules/@types",
        "./node_modules/@angular/material/typings",
        "./node_modules/@angular/cdk/typings"
      ],
      // 如果需要，也可以直接指定要包含的类型
      "types": ["angular", "angular-route", "angular-resource"]
    }
  }
  

3. MatDialogRef不识别的解决步骤 #

第一步：正确导入模块和类 #

• 首先，在你的Angular 2根模块（比如AppModule）中导入MatDialogModule，这样才能使用对话框功能：

  import { NgModule } from '@angular/core';
  import { MatDialogModule } from '@angular/material/dialog';
  
  @NgModule({
    imports: [
      // 其他你需要的模块，比如BrowserModule等
      MatDialogModule
    ]
  })
  export class AppModule { }
  

• 在你的TestDialog组件中，确保正确导入MatDialogRef：

  import { MatDialogRef } from '@angular/material/dialog';
  
  export class TestDialog {
    constructor(public dialogRef: MatDialogRef<TestDialog>) { }
    closeDialog() {
      this.dialogRef.close('Pizza!');
    }
  }
  

第二步：注意AngularJS与Angular 2的冲突 #

看到你的代码里用了angular.module("App", [...])，这是AngularJS的模块定义方式，和Angular 2的模块系统不兼容。如果你的项目是纯Angular 2应用，应该完全改用Angular 2的NgModule；如果是混合AngularJS和Angular 2的应用，你需要使用UpgradeModule来整合两种框架，否则Angular 2的Material组件无法在AngularJS的模块体系下工作。

第三步：正确打开对话框 #

要使用TestDialog，你需要在某个Angular 2组件中注入MatDialog并调用open()方法：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { TestDialog } from './test-dialog.component';

@Component({
  selector: 'app-some-component',
  template: '<button (click)="openTestDialog()">Open Dialog</button>'
})
export class SomeComponent {
  constructor(private dialog: MatDialog) {}

  openTestDialog() {
    const dialogRef = this.dialog.open(TestDialog);
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog closed with result: ${result}`);
    });
  }
}

最后提醒 #

如果你的项目原本是AngularJS应用，想要引入Angular 2的Material组件，这属于混合升级场景，需要额外配置UpgradeModule来桥接两种框架，否则会出现模块不兼容、组件无法识别的问题。

内容的提问来源于stack exchange，提问作者user2336704