Angular5+AngularMaterial2中MediaMatcher注入NullInjectorError问题排查

嗨，我之前也碰到过这个问题，其实根源很明确——你漏掉了Angular CDK里的布局模块！MediaMatcher并不是Angular Material核心模块自带的服务，它属于@angular/cdk/layout这个模块，必须显式导入才能让依赖注入系统找到它。

按下面的步骤来修复：

1. 确保安装了对应版本的Angular CDK #

Angular 5搭配Angular Material 2时，CDK是单独的包，如果你还没安装，先执行命令：

npm install @angular/cdk@5.x --save

注意要选和Angular 5匹配的5.x版本，避免版本不兼容。

2. 在对应模块中导入LayoutModule #

你的HomeComponent放在MainModule里，所以直接在MainModule中导入LayoutModule即可：

// MainModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入CDK布局模块
import { LayoutModule } from '@angular/cdk/layout';
// 导入你需要的Angular Material模块
import { MatSidenavModule, MatToolbarModule } from '@angular/material';

import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    LayoutModule, // 关键：加上这一行
    MatSidenavModule,
    MatToolbarModule
  ]
})
export class MainModule { }

这样依赖注入系统就能正确识别MediaMatcher服务，你按照文档实现的响应式侧边导航应该就能正常运行了。本质上，Angular Material的响应式布局能力是基于CDK布局模块实现的，所以必须显式导入它才能使用MediaMatcher这类底层服务。

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