Angular 2 RC 6 Material 2 Alpha 8 funktioniert nicht

Question

Ich habe kürzlich mein Projekt auf Angular 2 RC 6 und Material 2.0.0-alpha.8-1 aktualisiert, aber es funktioniert nicht, kann jemand bitte führen, was fehlt mir hier? Kann jemand bitte einen funktionierenden Plünderer mit Angular 2 RC 6 und Material 2.0.0-alpha.8-1 teilen?

Ich habe unter Pakete in meinem package.json:

"@angular2-material/button": "2.0.0-alpha.8-1", 
"@angular2-material/button-toggle": "2.0.0-alpha.8-1", 
"@angular2-material/card": "2.0.0-alpha.8-1", 
"@angular2-material/checkbox": "2.0.0-alpha.8-1", 
"@angular2-material/core": "2.0.0-alpha.8-1", 
"@angular2-material/grid-list": "2.0.0-alpha.8-1", 
"@angular2-material/icon": "2.0.0-alpha.8-1", 
"@angular2-material/input": "2.0.0-alpha.8-1", 
"@angular2-material/list": "2.0.0-alpha.8-1", 
"@angular2-material/menu": "2.0.0-alpha.8-1", 
"@angular2-material/progress-bar": "2.0.0-alpha.8-1", 
"@angular2-material/progress-circle": "2.0.0-alpha.8-1", 
"@angular2-material/radio": "2.0.0-alpha.8-1", 
"@angular2-material/sidenav": "2.0.0-alpha.8-1", 
"@angular2-material/slider": "2.0.0-alpha.8-1", 
"@angular2-material/slide-toggle": "2.0.0-alpha.8-1", 
"@angular2-material/tabs": "2.0.0-alpha.8-1", 
"@angular2-material/toolbar": "2.0.0-alpha.8-1", 
"@angular2-material/tooltip": "2.0.0-alpha.8-1", 

in AppModule habe ich importiert zunächst die folgenden erforderlichen Module:

import { MdCoreModule } from '@angular2-material/core/core'; 
import { MdCheckboxModule } from '@angular2-material/checkbox/checkbox'; 
import { MdProgressBarModule } from '@angular2-material/progress-bar/progress-bar'; 
import { MdRadioModule, MdUniqueSelectionDispatcher } from '@angular2-material/radio/radio'; 
import { MdSlideToggleModule } from '@angular2-material/slide-toggle/slide-toggle'; 
import { MdTabsModule } from '@angular2-material/tabs/tabs'; 

dann unten in der Liste der Einfuhr hinzugefügt:

imports: [ 
    .... 
    // Material Design 
    MdCoreModule.forRoot(), 
    MdCheckboxModule.forRoot(), 
    MdRadioModule.forRoot(), 
    MdSlideToggleModule.forRoot(), 
    MdTabsModule.forRoot(), 
    MdProgressBarModule.forRoot(), 
    .... 
], 

in Anbieter:

providers: [ 
     MdUniqueSelectionDispatcher 
] 

In meiner SystemJs Config-Datei Ich habe:

var map = { 
    '@angular': 'node_modules/@angular', 
    '@angular2-material': 'node_modules/@angular2-material', 

    'rxjs': 'node_modules/rxjs', 

    'app': 'content/app', 
    "angular2-masonry": "node_modules/angular2-masonry" 
}; 

var paths = { 
     "masonry-layout": "node_modules/masonry-layout/dist/masonry.pkgd.js" 
    }; 

var packages = { 
     'app': { main: 'main.js', defaultExtension: 'js' }, 
     'rxjs': { defaultExtension: 'js' }, 
     'angular2-masonry': { defaultExtension: 'js', main: "index" } 
    }; 


var angularPackages = [ 
    'common', 
    'compiler', 
    'core', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'forms' 
]; 

angularPackages.forEach(function (name) { 
    packages['@angular/' + name] = { 
     format: 'cjs', 
     main: 'bundles/' + name + '.umd.js', defaultExtension: 'js' 
    }; 
}); 

var materialComponents = [ 
     'core', 
     'button', 
     'card', 
     'checkbox', 
     'grid-list', 
     'icon', 
     'input', 
     'list', 
     'progress-bar', 
     'progress-circle', 
     'radio', 
     'sidenav', 
     'slide-toggle', 
     'tabs', 
     'toolbar' 
    ]; 

    materialComponents.forEach(function (name) { 
     packages[("@angular2-material/" + name)] = { 
      format: 'cjs', 
      main: name + '.umd.js', 
      defaultExtension: 'js' 
     }; 
    }); 

    var config = { 
     map: map, 
     packages: packages, 
     paths: paths 
    }; 

    System.config(config); 

Im Folgenden finden Sie die Fehlermeldung auf der Konsole angezeigt, wenn ich meine Anwendungen laufen:

43 Error: SyntaxError: Unexpected token import 
at Object.eval (http://localhost:57196/content/app/app.module.js:16:14) 
at eval (http://localhost:57196/content/app/app.module.js:328:4) 
at eval (http://localhost:57196/content/app/app.module.js:329:3) 
Evaluating http://localhost:57196/node_modules/@angular2-material/core/core.js 
Evaluating http://localhost:57196/content/app/app.module.js 
Evaluating http://localhost:57196/content/app/main.js 
Error loading http://localhost:57196/content/app/main.js 

Answer 1

Verstanden Fest! Wenn noch jemand Schwierigkeiten hat, Angular 2 RC 6 Material 2 Alpha 8 in Ihrem Projekt laufen zu lassen, könnte die folgende Konfiguration funktionieren.

Unten ist mein SystemJS Config File

(function (global) { 
    var map = { 
     //angular 
     '@angular': 'node_modules/@angular', 
     '@angular2-material': 'node_modules/@angular2-material', 
     'rxjs': 'node_modules/rxjs', 

     'app': 'content/app', 

     //thirdparty 
     "angular2-masonry": "node_modules/angular2-masonry", 
    }; 

    var paths = { 
     "masonry-layout": "node_modules/masonry-layout/dist/masonry.pkgd.js" 
    }; 

    var packages = { 
     'app': { main: 'main.js', defaultExtension: 'js' }, 
     'rxjs': { defaultExtension: 'js' }, 
     "angular2-masonry": { defaultExtension: 'js', main: "index" } 
    }; 

    var angularPackages = [ 
     'common', 
     'compiler', 
     'core', 
     'http', 
     'platform-browser', 
     'platform-browser-dynamic', 
     'router', 
     'forms' 
    ]; 

    angularPackages.forEach(function (name) { 
     packages['@angular/' + name] = { 
      format: 'cjs', 
      main: 'bundles/' + name + '.umd.js', 
      defaultExtension: 'js' 
     }; 
    }); 

    var materialComponents = [ 
     'checkbox', 
     'core', 
     'progress-bar', 
     'progress-circle', 
     'radio', 
     'sidenav', 
     'slide-toggle', 
     'tabs' 
    ]; 

    materialComponents.forEach(function (name) { 
     packages[("@angular2-material/" + name)] = { 
      format: 'cjs', 
      main: name + '.umd.js', 
      defaultExtension: 'js' 
     }; 
    }); 

    var config = { 
     map: map, 
     packages: packages, 
     paths: paths 
    }; 

    System.config(config); 

})(this); 

AppModule

Importe

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

//material 
import { MdCheckboxModule } from '@angular2-material/checkbox'; 
import { MdProgressBarModule } from '@angular2-material/progress-bar'; 
import { MdRadioModule, MdUniqueSelectionDispatcher } from '@angular2-material/radio'; 
import { MdSlideToggleModule } from '@angular2-material/slide-toggle'; 
import { MdTabsModule } from '@angular2-material/tabs'; 

Importe in NgModule

@NgModule({ 
    imports: [ 
     //angular 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     JsonpModule, 
     ReactiveFormsModule, 
     routing, 

     //material 
     MdCheckboxModule.forRoot(), 
     MdRadioModule.forRoot(), 
     MdSlideToggleModule.forRoot(), 
     MdTabsModule.forRoot(), 
     MdProgressBarModule.forRoot(), 
     MdProgressBarModule.forRoot() 
//..... 
    ], 

Wenn Ihr verwenden Funk

providers: [ 
     MdUniqueSelectionDispatcher 
] 

Answer 2

Ich benutze Werkstoff 2 zusammen mit dem ‚offiziellen‘ systemjs.config.js Datei und konnte nicht das mit den .js Fässer zu arbeiten.

Also ging ich voran und kartierte sie auf die .umd Dateien, z.

map: { 
    ... 
'@angular2-material/button': 'npm:@angular2-material/button/button.umd.js', 
'@angular2-material/card': 'npm:@angular2-material/card/card.umd.js', 
'@angular2-material/checkbox': 'npm:@angular2-material/checkbox/checkbox.umd.js', 
    ... 
} 

und entfernt die zugehörigen Einträge in der packages Abschnitt. Das hat den Trick für mich gemacht.