angularjs 2 mit eckig-material @ angular/core nicht gefunden

Question

ich möchte angular2 mit angular-material verwenden. Im Folgenden meine package.json ist

{ 
    "name": "angular2-boilerplate", 
    "version": "1.0.0", 
    "scripts": { 
    "lite": "lite-server", 
    "gulp": "gulp", 
    "start": "concurrent \"npm run gulp\" \"npm run lite\" " 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular2-material/button": "^2.0.0-alpha.2", 
    "@angular2-material/checkbox": "^2.0.0-alpha.2", 
    "@angular2-material/core": "^2.0.0-alpha.2", 
    "@angular2-material/progress-circle": "^2.0.0-alpha.2", 
    "@angular2-material/toolbar": "^2.0.0-alpha.2", 
    "@angular2-material/input": "^2.0.0-alpha.2", 
    "@angular2-material/card": "^2.0.0-alpha.2", 
    "angular2": "2.0.0-beta.15", 
    "angular2-jwt": "0.1.9", 
    "cors": "2.7.1", 
    "es6-promise": "3.1.2", 
    "es6-shim": "^0.35.0", 
    "express": "4.13.4", 
    "express-jwt": "3.3.0", 
    "systemjs": "0.19.25", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "zone.js": "0.6.6" 
    }, 
    "devDependencies": { 
    "autoprefixer": "^6.3.5", 
    "cssnano": "^3.4.0", 
    "concurrently": "^2.0.0", 
    "gulp": "^3.9.0", 
    "gulp-ext-replace": "^0.2.0", 
    "gulp-imagemin": "^2.4.0", 
    "gulp-postcss": "^6.0.1", 
    "gulp-sourcemaps": "^1.6.0", 
    "gulp-typescript": "^2.10.0", 
    "gulp-uglify": "^1.5.1", 
    "lite-server": "^2.1.0", 
    "postcss": "^5.0.13", 
    "postcss-scss": "^0.1.3", 
    "precss": "^1.3.0" 
    } 
} 

TSconfig ist

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "./app" 
    }, 
    "filesGlob": [ 
    "./dev/**/*.ts", 
    "!./node_modules/**/*.ts" 
    ], 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ], 
    "atom": { 
    "rewriteTsconfig": true 
    } 
} 

und SystemJs ist

System.config({ 
     defaultJSExtensions: true, 
     map: { 
      "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt", 
      "angular2": "node_modules/angular2", 
      "rxjs": "node_modules/rxjs", 
      '@angular2-material/core': 'node_modules/@angular2-material/core', 
      '@angular2-material/checkbox': 'node_modules/@angular2-material/checkbox/checkbox', 
      '@angular2-material/button': 'node_modules/@angular2-material/button/button', 
      '@angular2-material/progress-circle': 'node_modules/@angular2-material/progress-circle/progress-circle', 
      '@angular2-material/card': 'node_modules/@angular2-material/card/card', 
      '@angular2-material/input': 'node_modules/@angular2-material/input/input', 
      '@angular2-material/toolbar': 'node_modules/@angular2-material/toolbar/toolbar', 
     } 
    }); 
    System.import('app/boot') 
      .then(null, console.error.bind(console)); 

Jedes Mal, wenn ich versuche, MdButton in meiner Anwendung zu verwenden, indem sie von Winkel- importieren Material wie import {MdButton} from '@angular2-material/button';, bekomme ich folgenden Fehler wie unten gezeigt

"NetworkError: 404 Not Found - http://localhost:3000/@angular/core.js" 
core.js 
Error: patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:830:27 
    Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:423:24 
    Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:320:29 
    ZoneTask/this.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:490:29 

    Error loading http://localhost:3000/@angular/core.js as "@angular/core" from http://localhost:3000/node_modules/@angular2-material/button/button.js 


var newErr = new Error(newMsg, err.fileName, err.lineNumber); 

Ich konnte @ Angular-Ordner in node_modules nicht sehen. Wie bekomme ich diesen Ordner wenn nötig?
Warum es scheitert?
Hinweis: Meine Anwendung funktioniert gut, wenn ich die Abhängigkeit von Angular-Material entfernen.

Answer 1

Die letzte Version von @ angular2-material verwendet die Version rc.0 von Angular2 (siehe Datei changelog), keine Beta-Version. Zwischen diesen beiden Versionen wurden die Module von Angular2 in @angular umbenannt.

Außerdem gibt es eine andere Möglichkeit, Angular2 (über die SystemJS-Konfiguration) zu konfigurieren, da das Framework (noch) keine gebündelten Dateien bereitstellt.

Siehe diesen Link für weitere Details: https://angular.io/docs/ts/latest/quickstart.html#!#systemjs.