Question

我目前正在使用角度4，我按照链接here关于如何使用角度材质。这是我到目前为止所做的：

app.module.ts

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import 'hammerjs';

imports: [
    BrowserAnimationsModule
  ],

我在index.html中加入了主题样式

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> 
</head>

成分</ P>

<md-sidenav-container>
  <md-sidenav>
    un idee
  </md-sidenav>

  <!-- primary content -->
</md-sidenav-container>

但我收到错误：

Unhandled Promise rejection: Template parse errors:
'md-sidenav' is not a known element:
1. If 'md-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'md-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

以及以下警告

Could not find Angular Material core theme. Most Material components may not work as expected

有谁可以指出我做错了什么？

Answer 1

您缺少MdSidenavModule导入并将其作为依赖项添加到AppModule

import { MdSidenavModule} from '@angular/material'

imports: [
    BrowserAnimationsModule, MdSidenavModule
  ],

还要确保systemjs配置文件中有以下行

 '@angular/material': 'npm:@angular/material/bundles/material.umd.js',

如果您遇到BrowserAnimationsModule, NoopAnimationsModule错误。请参阅此 post

更新：对于CLI，请使用以下路径更新 tsconfig-build.json 文件

"paths": {
     "@angular/material": ["../../dist/packages/material/public_api"]
 }

注意：路径可能会根据您的版本进行更改

找不到Angular Material核心主题。大多数材料组件可能无法按预期工作

1 个答案: