node.js - Angular 4 : Node is throwing a reference error: navigator is not defined when I add <md-sidenav>

Question

我正在使用 Angular 4 和 Angular/material。 MdToolbar 工作正常，但是当我将 MdSidenav 添加到我的应用程序模板时，就像文档中指出的那样，Node 给了我一个 ReferenceError: navigator is not Defined。有人经历过类似的事情吗？

src/app.component.html

<md-sidenav-container>

<layout-header>
    <nav-bar></nav-bar>
    <!-- TODO: Create nav component -->
    <a routerLink="/">Home</a>
    <a routerLink="/about">About</a>
    <a routerLink="/lazy">Lazy</a>
    <a routerLink="/lazy2">Lazy 2</a>
    <a routerLink="/user-profile">User Profile</a>
    <a routerLink="/test-rest">Test Rest</a>
    <a routerLink="/test-route-params">Test Route Params</a>
</layout-header>

<md-sidenav #sidenav class="sidenav">
    <ul>
        <li>Search</li>
        <li>Start a Group</li>
        <li>App Settings</li>
        <li>About</li>
        <li>Help</li>
        <li>Logout</li>
    </ul>
</md-sidenav>

<!--primary router outlet: a dynamic component that the router uses to 
display-->
<router-outlet></router-outlet>

<!-- TODO: Issue with event not emitting via onShown/onHidden -->
<!-- Ref: https://github.com/valor-software/ngx-bootstrap/issues/1886 -->
<app-dialog (dynamicComponent)="onDialogLoad($event)" (onShown)="test()" 
(onHidden)="test2()"></app-dialog>

<!--TODO: example; Delete-->
<button (click)="create()">Create</button>
<simple-notifications [options]="options"></simple-notifications>

<layout-footer></layout-footer>
</md-sidenav-container>

src/app.module.ts

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    TransferHttpModule,
    NgReduxModule,
    MdToolbarModule,
    MdSidenavModule,
    MdIconModule,
    MdCardModule,
    MdInputModule,
    MdButtonModule,
    DialogModule.forRoot([LoginForm]),
    SimpleNotificationsModule.forRoot(), // TODO: remove; testing only
    RouterModule.forRoot(AppRoutes)
],
providers: [ AuthGuard, DialogService ],
declarations: [
    AppComponent,
    HomeView,
    AboutComponent,
    HeaderComponent,
    FooterComponent,
    NavBarComponent,
    LoginForm,
    SideNavComponent
],
exports: [ AppComponent ],
bootstrap : [ AppComponent ]

}) 导出类 AppModule {}

NodeJS 错误

错误{ReferenceError:导航器未定义 在新平台(/Users/lsorensen/code/OneUnionV1/node_modules/@angular/material/bundles/material.umd.js:3396:36) 在 ServerAppModuleInjector.get (ng:///ServerAppModule/module.ngfactory.js:177:61) 在 ServerAppModuleInjector.get (ng:///ServerAppModule/module.ngfactory.js:182:120) 在 ServerAppModuleInjector.get (ng:///ServerAppModule/module.ngfactory.js:187:108) 在 ServerAppModuleInjector.getInternal (ng:///ServerAppModule/module.ngfactory.js:477:56) 在 ServerAppModuleInjector.NgModuleInjector.get (/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:3563:44) 在resolveDep(/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:10931:45) 在createClass(/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:10795:147) 在createDirectiveInstance(/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:10628:37) 在createViewNodes(/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:11978:49) 在 callViewAction (/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:12348:13) 在 execComponentViewsAction (/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:12287:13) 在createViewNodes(/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:12005:5) 在createRootView(/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:11883:5) 在 Object.createProdRootView [作为 createRootView] (/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:12461:12) 在 ComponentFactory_.create (/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:9819:46) 在 ComponentFactoryBoundToModule.create (/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:3434:29) 在ApplicationRef_.bootstrap(/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:5016:57) 在/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:4803:79 at Array.forEach( native ) 在 PlatformRef_._moduleDoBootstrap (/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:4803:42) 在/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:4765:27 在 ZoneDelegate.invoke (/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:365:26) 在Object.onInvoke(/Users/lsorensen/code/OneUnionV1/node_modules/@angular/core/bundles/core.umd.js:4132:37) 在 ZoneDelegate.invoke (/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:364:32) 在 Zone.run (/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:125:43) 在/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:758:57

Answer 1

仅从 NgModule 导出 MdSidenavModule 可能适合您的情况。

我很幸运将 Material 模块(跨多个组件使用的模块)分解为自己的模块，这稍微清理了 app.module 。然后在 app.module 中进行导入和导出，如下所示:

Material .module.ts

import { MdSidenavModule } from '@angular/material';
. 
.
const MATERIAL_MODULES = [
    MdSidenavModule,
    .
    .
];
@NgModule({
    imports: MATERIAL_MODULES,
    exports: MATERIAL_MODULES
})

export class MaterialModule { }

应用程序模块

import { MaterialModule } from '../material.module';
.
.
@NgModule({
    imports: [
        MaterialModule,
        .
        .
    ],
    exports:   [ MaterialModule ],
})