0

I am currently using angular 4, and I followed the link here about how to use Angular Material. This is what I have done so far:

app.module.ts

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

imports: [
    BrowserAnimationsModule
  ],

I included in my index.html the theme style

<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>

component

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

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

But I am getting the error:

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.

and the following warning

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

Could anyone point out what I am doing wrong?

Aravind
  • 40,391
  • 16
  • 91
  • 110
edkeveked
  • 17,989
  • 10
  • 55
  • 93

1 Answers1

1

You are missing MdSidenavModule import and adding it as a dependency to your AppModule

import { MdSidenavModule} from '@angular/material'

imports: [
    BrowserAnimationsModule, MdSidenavModule
  ],

Also ensure that, the following line is there in your systemjs config file

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

If you are facing the BrowserAnimationsModule, NoopAnimationsModule error. Refer to this post

Update : For CLI, update the tsconfig-build.json file with the below path

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

Note: Path subjected to change as per your version

Community
  • 1
  • 1
Aravind
  • 40,391
  • 16
  • 91
  • 110
  • I imported `MdSidenavModule`. But, it caused a compilation error `has no exported member`. I am using cli so I don't have systemjs config file. – edkeveked May 05 '17 at 07:23
  • Sorry, but it seems that I don't have the file tsconfig-build either. i do have tsconfig.json but not the one you mentioned – edkeveked May 05 '17 at 07:37
  • I did as you suggested `{ "compilerOptions": { "baseUrl": "", "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es6", "dom"], "mapRoot": "./", "module": "es6", "moduleResolution": "node", "outDir": "../dist/out-tsc", "sourceMap": true, "target": "es5", "typeRoots": [ "../node_modules/@types" ], "paths": { "@angular/material": ["../dist/packages/material/public_api"] } } }` But I stil facing the same problem – edkeveked May 05 '17 at 08:14