как использовать angular2-материал с angular2 приложением

Question

ПРИМЕЧАНИЕМ: Я не использую Угловой-CLI

у меня работает angular2-быстрый старт приложение.

package.json

Примечание: У меня angular2-материал ссылка в packag.json

{ 
    "name": "angular2", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    ... 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    ... 
    ... 
    "@angular2-material/core":"2.0.0-alpha.6",  //<---- installed it 
    "@angular2-material/button":"2.0.0-alpha.6" //<---- installed it 
    }, 
    "devDependencies": { 
    ... 
    } 
} 

systemjs.config.js

/** 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
    'app':      'app', // 'dist', 
    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs', 


    '@angular2-material/core': 'node_modules/@angular2-material/core',  //<---added 
    '@angular2-material/button': 'node_modules/@angular2-material/button', //<---added 


    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 


    '@angular2-material/core': { main: 'core.js' },  //<----added 
    '@angular2-material/button': { main: 'button.js' },  //<----added 


    }; 
    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'router-deprecated', 
    'upgrade', 
    ]; 
    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
    // Most environments should use UMD; some (Karma) need the individual index files 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 
    var config = { 
    map: map, 
    packages: packages 
    }; 
    System.config(config); 
})(this); 

app.component.ts

import { Component } from '@angular/core'; 

import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button'; //<---added 

@Component({ 
    selector: 'my-app', 

    directives: [MD_BUTTON_DIRECTIVES],        //<---added 

    template: `<h1>My First Angular 2 App</h1> 
    <button md-button>Basic Button</button> 
    ` 
}) 
export class AppComponent { } 

---

zone.js:101 GET http://localhost:3000/node_modules/@angular2-material/button/ 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM278:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 (index):16 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular2-material/button (…)

Answer 1

/** 
* PLUNKER VERSION (based on systemjs.config.js in angular.io) 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function(global) { 

    var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current! 
    var routerVer = '@3.0.0-rc.1'; // lock router version 
    var formsVer = '@0.3.0'; // lock forms version 
    var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides 

    //map tells the System loader where to look for things 
    var map = { 
    'app':      'app', 

    '@angular':     'https://npmcdn.com/@angular', // sufficient if we didn't pin the version 
    '@angular/router':   'https://npmcdn.com/@angular/router' + routerVer, 
    '@angular/forms':    'https://npmcdn.com/@angular/forms' + formsVer, 
    '@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer, 
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest 
    'rxjs':      'https://npmcdn.com/rxjs@5.0.0-beta.6', 
    'ts':       'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js', 
    'typescript':     'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js', 
    '@angular2-material':   'node_modules/@angular2-material', 
}; 

    //packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.ts', defaultExtension: 'ts' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
    '@angular2-material/core': { 
     format: 'cjs', 
     defaultExtension: 'js', 
     main: 'core.js' 
     }, 
     '@angular2-material/checkbox': { 
     main: 'checkbox.js', 
     defaultExtension: 'js', 
     format: 'cjs' 
     }, 
     '@angular2-material/button': { 
     main: 'button.js', 
     defaultExtension: 'js', 
     format: 'cjs' 
     }, 
     '@angular2-material/progress-circle': { 
     main: 'progress-circle.js', 
     defaultExtension: 'js', 
     format: 'cjs' 
     }, 
     '@angular2-material/card': { 
     main: 'card.js', 
     defaultExtension: 'js', 
     format: 'cjs' 
     }, 
     '@angular2-material/input': { 
     main: 'input.js', 
     defaultExtension: 'js', 
     format: 'cjs' 
     }, 
     '@angular2-material/toolbar': { 
     main: 'toolbar.js', 
     defaultExtension: 'js', 
     format: 'cjs' 
     }, 
     '@angular2-material/menu': { 
      main: 'menu.js', 
      defaultExtension: 'js', 
      format: 'cjs' 
     }, 
     '@angular2-material/icon': { 
      main: 'icon.js', 
      defaultExtension: 'js', 
      format: 'cjs' 
      } 
    }; 

    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'upgrade', 
    ]; 

    // Add map entries for each angular package 
    // only because we're pinning the version with `ngVer`. 
    ngPackageNames.forEach(function(pkgName) { 
    map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer; 
    }); 

    // Add package entries for angular packages 
    ngPackageNames.concat(['forms', 'router', 'router-deprecated']).forEach(function(pkgName) { 

    // Bundled (~40 requests): 
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 

    // Individual files (~300 requests): 
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 
    var config = { 
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER 
    transpiler: 'ts', 
    typescriptOptions: { 
     tsconfig: true 
    }, 
    meta: { 
     'typescript': { 
     "exports": "ts" 
     } 
    }, 
    map: map, 
    packages: packages 
    }; 

    System.config(config); 

})(this); 

Answer 2

импорта @ углового/материала и не angular2-материала