Problem beim Importieren von Material sidenav auf einer Progressive Web App (Angular2)

Question

Nachdem ich das MobileToolkit-Handbuch von Angular (https://github.com/angular/mobile-toolkit/blob/master/guides) fertiggestellt hatte, wollte ich einige zusätzliche Komponenten zu meiner App bringen ... wie ein Sidentenav!

Genau wie das Tutorial mich gelehrt, habe ich den gesamten Code erforderlich, um die SideNav Komponente zu verwenden ...

meine app.component.ts Importe hier:

hier die Richtlinien Anmeldung:

Die externen Pakete hinzugefügt (die ersten beiden sind f rom die erwähnten Tutorial):

Und alle Exporte (wieder aus dem Tutorial):

Having, dass alles an seinem Platz, führe ich die "ng dienen" Befehl und .... meh:

Nach einigen Recherchen fand ich ähnliche i Die meisten von ihnen waren entweder mit einem fehlenden eckigen Paket (http) oder mit alten Angular2-Versionen verwandt. Das ist hier nicht der Fall, da ich die neuesten Versionen bin mit und http-Paket ist in Ort (innerhalb der beiden node_modules und dist Ordner)

Wenn Sie tiefer graben: https://github.com/d0cz/t-tracker/tree/master

Answer 1

Gestern hatte ich ein ähnliches Problem whic updating angular-cli-build.js wie die folgenden (siehe am Ende @ angular2-Material Eintrag)

/* 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' 
    ] 
    }); 
}; 

gelöst bekam ich hoffe, diese

UPDATE hilft

Es könnte sein, dass Sie

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

in System-config.js

UPDATE 2 fehlen - offen sidenav

hier ist der Code Ich benutze die sidenav zu öffnen

<md-sidenav #sidenav (open)="mybutton.focus()" align="start"> 
    ...... 
    </md-sidenav> 

    <button (click)="sidenav.toggle()"></button> 

Beachten Sie, dass der CLI ck des Buttons löst die toggle() Methode von sidenav aus. Dies ist eine Demo die ich bei angular2-material gefunden habe https://github.com/jelbourn/material2-app