Issue importing Material's sidenav on a Progressive Web App (Angular2)


After finishing Angular's MobileToolkit guide (, I wanted to bring some extra components to my app... like a sidenav!

Just like the tutorial taught me, I added all the code needed to use the SideNav component...

Here's my app.componenet.ts imports:

enter image description here

Here's the directives registration:

enter image description here

The external packages added (first two are from the mentioned tutorial):

enter image description here

And all the exports (again, from the tutorial):

enter image description here

Having all that in place, I execute the "ng serve" command and.... meh:

enter image description here

After some research, I found similar issues around the web, but most of them were either related to a missing angular package (http) or to old Angular2 versions. That is not the case here, since I'm using the latest versions and http package is in place (inside both node_modules and dist folders)

If you want to dig deeper:

There we go, woohoo! Thanks for your attention :)


Yesterday I had a similar problem whic got solved updating angular-cli-build.js such as the following (see at the bottom @angular2-material entry)

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [

I hope this helps


It could be that you are missing

  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'

in system-config.js

UPDATE 2 - open sidenav

here is the code I use to open the sidenav

By : Picci

This video can help you solving your question :)
By: admin