Как использовать OverlayModule (angular2-материал) в Angular2 App

Question

Примечание: Не использовать радиально-Cli

OverlayModule, как представляется, требуется для других angular2-материальных компонентов.

zone.js: 355 Неизвестное Promise отказ: Ошибка в классе ./AppComponent AppComponent - встроенный шаблон: 2: 2 вызвано следующими причинами: Нет кормильцем Overlay! ; Зона:; Задача: Promise.then; Значение:

Я установил все упаковки из углового материала2.

sytemjs.config.js

map: { 
     // our app is within the app folder 
     app: 'dist', 
     ... 
     ... 
     '@angular2-material/core': 'npm:@angular2-material/core/core.umd.js', 
     '@angular2-material/button': 'npm:@angular2-material/button/button.umd.js', 
     '@angular2-material/menu': 'npm:@angular2-material/menu/menu.umd.js', 
     '@angular2-material/icon': 'npm:@angular2-material/icon/icon.umd.js', 
     _____________________________________________________________________ 
     /*>>>>> DO I NEED TO MAP ANYTHING FOR OVERLAY HERE? <<<<<< */ 
     ______________________________________________________________________ 
     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
    }, 

Я использую sharedModule для angular2-материальных компонентов Так что они будут доступны во всем мире.

shared.module.ts

import {MdButtonModule } from '@angular2-material/button'; 
import {MdIconModule} from '@angular2-material/icon'; 
import {MdMenuModule} from '@angular2-material/menu'; 
import {MdIconRegistry} from '@angular2-material/icon'; 

@NgModule({ 
    imports:  [ CommonModule ], 
    declarations: [], 
    exports:  [ CommonModule,MdButtonModule,MdMenuModule,MdIconModule], 
}) 
export class SharedModule { 
    static forRoot(): ModuleWithProviders { 
    return { 
     ngModule: SharedModule, 
     providers: [ MdIconRegistry ] //>>>>> DO I NEED TO ADD ANYTHING HERE ?? 
    }; 
    } 
} 

App.Module.ts

@NgModule({ 
    imports:  [ BrowserModule,SharedModule.forRoot()], 
    ... 
}) 

HTML:

<button md-icon-button [md-menu-trigger-for]="menu"> 
    <md-icon>more_vert</md-icon> 
</button> 

<md-menu #menu="mdMenu"> 
    <button md-menu-item> Refresh </button> 
    <button md-menu-item> Settings </button> 
    <button md-menu-item> Help </button> 
    <button md-menu-item disabled> Sign Out </button> 
</md-menu> 
<button md-raised-button>Button</button> 

Answer 1

Там находятся Severa л опции:

• 1) Попробуйте импортировать OverlayModule в совместно используемой модуля, как показано ниже:

shared.module.ts

import {OverlayModule } from '@angular2-material/core'; 
@NgModule({ 
    imports:  [ CommonModule, OverlayModule.forRoot() ], <== here 
    declarations: [], 
    exports:  [ CommonModule,MdButtonModule,MdMenuModule,MdIconModule], 
}) 
export class SharedModule { 

• 2) вы можете импортировать его в основной модуль

• 3) или использовать следующее:

shared.module.ts

static forRoot(): ModuleWithProviders { 
    return { 
    ngModule: SharedModule, 
     [ MdIconRegistry, MdMenuModule.forRoot().providers ] 
    }; 
} 

Plunker Example

• 4) или таким образом:

общий.module.ц

@NgModule({ 
    imports:  [ CommonModule, MdMenuModule.forRoot() ], 
    declarations: [], 
    exports:  [ CommonModule,MdButtonModule,MdMenuModule,MdIconModule], 
}) 

• 5) просто добавить провайдеров в SharedModule

shared.module.ts

import {OVERLAY_PROVIDERS } from '@angular2-material/core'; 
return { 
    ngModule: SharedModule, 
    providers: [ MdIconRegistry, OVERLAY_PROVIDERS ] 
}; 

---

forRoot() всегда возвращают объект ModuleWithProviders:

export interface ModuleWithProviders { 
    ngModule: Type<any>; 
    providers?: Provider[]; 
} 

export class MdMenuModule { 
    static forRoot(): ModuleWithProviders { 
    return { 
     ngModule: MdMenuModule, 
     providers: OVERLAY_PROVIDERS, 
    }; 
    } 
} 

https://github.com/angular/material2/blob/2.0.0-alpha.8/src/lib/menu/menu.ts#L21

Answer 2

Просто, чтобы добавить к accepted answer.

Первое, что нужно отметить, это то, что forRoot() не следует импортировать в общие модули по указанным причинам here. Теперь следует поставщики из них будут извлечены, чтобы добавить общие модули @NgModule.providers

@NgModule({ 
    imports: [ SomeModule.forRoot() ], 
    providers: [ SomeModule.forRoot().providers ] 
}) 
export class SharedModule {} 

Не делать либо из них. Не в общем модуле. Ниже в порядке, хотя я не думаю, что это означало быть использован таким образом

@NgModule({}) 
export class SharedModule { 
    static forRoot() { 
    return { 
     ngModule: SharedModule, 
     providers: [ SomeModule.forRoot().providers ] 
    } 
    } 
} 

Как я сказал, что это нормально, это будет работать, но это только выглядит странно. Возможно, более элегантным решением является тот, который предоставляется самим Материалом. Это вы посмотрите на снимок (на данный момент - будет в следующей версии), вы увидите, где они сделали module that consolidated all the MD modules. Может быть, просто делать то, что они делают, но вместо того, чтобы добавить все модули, просто добавьте те, которые вы используете

const MATERIAL_MODULES = [ 
    MdButtonModule, 
    MdIconModule, 
    MdMenuModule 
]; 

@NgModule({ 
    imports: [ 
    MdButtonModule.forRoot(), 
    MdIconModule.forRoot(), 
    MdMenuModule.forRoot() 
    ], 
    exports: MATERIAL_MODULES 
}) 
export class MaterialRootModule {} 

@NgModule({ 
    imports: MATERIAL_MODULES, 
    exports: MATERIAL_MODULES 
}) 
export class MaterialModule { 
    static forRoot() { 
    ngModule: MaterialRootModule 
    } 
} 

И в вашей общей модуль просто

exports: [ MaterialModule ] 

и в модуле приложения

imports: [ MaterialModule.forRoot() ] 

Стиль, я думаю, я, вероятно, поеду по этому маршруту.