在 Progressive Web App (Angular2) 上导入 Material 的 sidenav 时出现问题

Question

完成 Angular 的 MobileToolkit 指南 (https://github.com/angular/mobile-toolkit/blob/master/guides) 后，我想为我的应用程序添加一些额外的组件...比如 sidenav！

就像教程教我的那样，我添加了使用 SideNav 组件所需的所有代码...

这是我的 app.component.ts 导入：

这是指令注册：

添加的外部包（前两个来自提到的教程）：

以及所有导出（再次来自教程）：

所有这些都准备就绪后，我执行 "ng serve" 命令并....嗯：

经过一些研究，我在网络上发现了类似的问题，但大多数问题要么与缺少 angular 包 (http) 相关，要么与旧的 Angular2 版本相关。这里不是这种情况，因为我使用的是最新版本并且 http 包已经到位（在 node_modules 和 dist 文件夹中）

如果你想深入挖掘：https://github.com/d0cz/t-tracker/tree/master

Answer 1

昨天我有一个类似的问题得到解决 updating angular-cli-build.js 如下（见底部@angular2-material条目）

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

希望对您有所帮助

更新

可能是你漏了

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

在系统中-config.js

更新 2 - 打开 sidenav

这是我用来打开 sidenav 的代码

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

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

请注意，单击按钮会触发 sidenav 的 toggle() 方法。这是我在 angular2-material https://github.com/jelbourn/material2-app

上找到的演示

在 Progressive Web App (Angular2) 上导入 Material 的 sidenav 时出现问题

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

angular

angular-material

angular-cli

progressive-web-apps