Angular 和 Material 不加载样式

Question

我已经使用 angular cli 创建了我的 angular 项目。之后我按照本指南https://material.angular.io/guide/getting-started

现在一切就绪，我创建了一个这样的材质模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';

@NgModule({
  imports: [MatButtonModule],
  exports: [MatButtonModule],
})
export class MyOwnMaterialModule { }

在我的 app.component.ts 中，我像这样导入了 MyOwnMaterialModule：

import { Component } from '@angular/core';
import { MyOwnMaterialModule } from './myown-material.module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

在 app.component.html 中，我添加了一个按钮来测试材质设置，如下所示：

<button mat-button>Test</button>

页面加载，但它只是一个普通按钮。它看起来不像材质按钮。

我做错了什么？我导入了所有内容。

Answer 1

您需要将MyOwnMaterialModule 导入您的app.module.ts 并在@NgModule's imports: [...] 而不是组件下声明它。