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

Question!

After finishing Angular's MobileToolkit guide (https://github.com/angular/mobile-toolkit/blob/master/guides), 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: https://github.com/d0cz/t-tracker/tree/master

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



Answers

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: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js',
      '@angular2-material/**/*.js'
    ]
  });
};

I hope this helps

UPDATE

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