Wie ein mdl-Dialog im deklarativen Weise konfigurieren

Question

Ich versuche, einen mdl-Dialog mit meiner Komponente zu verwenden, wie hier gezeigt: http://mseemann.io/angular2-mdl/dialogs-declarative

aber der Compiler sagt:

Can not Binde an 'mdl-dialog-config', da es keine bekannte Eigenschaft von 'mdl-dialog' ist.

1. If ‚mdl-Dialog‘ eine Winkelkomponente ist, und es hat ‚mdl-dialog-config‘ eingegeben wird, dann zu überprüfen, dass es einen Teil dieses Moduls ist.
2. Wenn 'mdl-dialog' eine Web-Komponente ist, dann fügen Sie "CUSTOM_ELEMENTS_SCHEMA" den '@ NgModule.schemas' dieser Komponente hinzu, um diese Nachricht zu unterdrücken.

Meine volle Komponente ist:

import { Component, Input, OnInit, ViewContainerRef } from '@angular/core'; 
    import { DomSanitizer } from '@angular/platform-browser'; 
    import { Router, ActivatedRoute, Params } from '@angular/router'; 

    import { OrderItem } from '../models/OrderItem'; 
    import { SizerunBox } from '../models/SizerunBox'; 
    import { Customer } from '../models/Customer'; 

    import { CollectionDataService } from '../services/CollectionData.service'; 

    import { MdlDialogOutletService, MdlDialogComponent, MdlDialogReference } from 'angular2-mdl'; 

    export interface OrderItemWithSizerunBoxes extends OrderItem { 
    sizerunboxes: SizerunBox[]; 
    } 

    @Component({ 
    selector: 'ordercart', 
    templateUrl: 'app/ordercart/ordercart.component.html', 
    styleUrls: ['app/ordercart/ordercart.component.css'] 
    }) 
    export class OrderCart implements OnInit { 
    ordercart: OrderItemWithSizerunBoxes[]; 
    ordercartsizerunboxes: SizerunBox[]; 
    from: string = ""; 
    rawOrderDate: Date = new Date(); 
    orderDate: string = ""; 
    Customers: Customer[] = []; 

    constructor(
      private route: ActivatedRoute, 
      private router: Router, 
      private sanitizer: DomSanitizer, 
      private collectionDataService: CollectionDataService, 
      private dilalogOuletService: MdlDialogOutletService, 
      private viewContainerRef: ViewContainerRef 
     ) { 

     this.dilalogOuletService.setDefaultViewContainerRef(this.viewContainerRef); 
    } 

    ngOnInit() { 
     this.orderDate = this.rawOrderDate.toISOString().slice(0,10); 

     this.route.params.forEach((params: Params) => { 
      this.from = params['from']; 
     }); 

     this.ordercart = <OrderItemWithSizerunBoxes[]>this.collectionDataService.getOrderCart(); 
     this.ordercartsizerunboxes = this.collectionDataService.getOrderCartSizerrunBoxes(); 
     this.ordercart.map(orderitem => { 
       orderitem.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl("/template/images/"+orderitem.itemid+".jpg"); 
       orderitem.sizerunboxes = this.ordercartsizerunboxes.filter(sritem => sritem.orderitemid === orderitem.idorderitems); 
      }); 

     this.collectionDataService. 
      getCustomers() 
      .then(Customers => this.Customers = Customers); 
    } 
    } 

und in Vorlage Ich habe:

<button #sendOrderButton (click)="sendOrderDialog.show()" mdl-button mdl-button-type="icon" mdl-ripple> 
     <mdl-icon>send</mdl-icon> 
    </button> 
    <mdl-dialog #sendOrderDialog [mdl-dialog-config]="{ 
      clickOutsideToClose: true, 
      styles:{'width': '300px'}, 
      isModal:true, 
      openFrom: sendOrderButton, 
      enterTransitionDuration: 400, 
      leaveTransitionDuration: 400}"> 
    // ... 
    </mdl-dialog> 

mit der Vorlage Steckdose im Körperelement der App.

Wenn ich die Konfiguration entfernen:

<button #sendOrderButton (click)="sendOrderDialog.show()" mdl-button mdl-button-type="icon" mdl-ripple> 
     <mdl-icon>send</mdl-icon> 
    </button> 
    <mdl-dialog #sendOrderDialog> 

der Dialog beginnt zu arbeiten.

Nach Michaels Beispiel here habe ich versucht, diese Klassen in meiner Komponente zu importieren:

import { MdlDialogComponent } from '../../node_modules/angular2-mdl/components/dialog/index'; 
    import { MdlDialogReference } from '../../node_modules/angular2-mdl/components/dialog/mdl-dialog.service'; 

aber der Fehler bestehen bleibt. Was vermisse ich?

EDIT Hier mein app.module:

import { NgModule, LOCALE_ID } from '@angular/core'; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
    import { HttpModule } from '@angular/http'; 

    import { MdlModule } from 'angular2-mdl'; 
    import { MdlPopoverModule } from '@angular2-mdl-ext/popover'; 
    import { MdlSelectModule } from '@angular2-mdl-ext/select'; 

    import './rxjs-extensions'; 

    import { AppComponent } from './app.component'; 
    import { MainpageComponent } from './mainpage/mainpage.component'; 
    import { ViewerComponent } from './viewer/viewer.component'; 
    import { ProductDetails } from './productdetails/productdetails.component'; 
    import { NewItem } from './newitem/newitem.component'; 
    import { OrderCart } from './ordercart/ordercart.component'; 
    import { Statistics } from './statistics/statistics.component'; 

    import { AppRoutingModule } from './app.routes'; 

    import { CollectionDataService } from './services/CollectionData.service'; 
    import { customerSearchPipe } from './pipes/customer-search.pipe'; 
    import { orderSearchPipe } from './pipes/order-search.pipe'; 

    import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; 
    import { InMemoryDataService } from './services/in-memory-data.service'; 

    import { HighlightDirective } from './highlight.directive'; 
    import { HammerGesturesDirective } from './hammergestures.directive'; 


    @NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     AppRoutingModule, 
     MdlModule, 
     MdlPopoverModule, 
     MdlSelectModule, 
     HttpModule, 
     InMemoryWebApiModule.forRoot(InMemoryDataService), 
    ], 
    declarations: [ 
     AppComponent, 
     MainpageComponent, 
     ViewerComponent, 
     ProductDetails, 
     NewItem, 
     OrderCart, 
     Statistics, 
     customerSearchPipe, 
     orderSearchPipe, 
     HighlightDirective, 
     HammerGesturesDirective, 
    ], 
    providers: [ 
     { provide: LOCALE_ID, useValue: "it-IT" }, 
     CollectionDataService 
    ], 
    bootstrap: [ AppComponent ] 
    }) 
    export class AppModule { } 

Answer 1

Frage gelöst Modernisierung angular2-mdl-Modul auf Version 2.4.0.