wie man angular2-material mit angular2 verwendet

Question

HINWEIS: Ich benutze Angular Cli nicht.

Ich fügte hinzu @ angular2-Material/Kern Paket. Dann habe ich andere angular2-Material-Komponenten wie @ angular2-Material/Knopf, @ angular2-Material/Karte und so weiter installiert.

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':   'node_modules/@angular2-material', 
    // <--------------added this above line---------------------- 
    }; 
    // 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' }, 
    }; 
    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'router-deprecated', 
    'upgrade', 
    ]; 

    //<------------------added this below part-------------------------------- 
var materialPackages=[ 
    'core', 
    //'button', 
    //'card', 
    'list', 
    ]; 
    materialPackages.forEach(function(pkgName) { 
    packages['@angular2-material/'+pkgName] = { format: 'cjs', defaultExtension: 'js'}; 
    }); 
//<----------------------till here--------------------------------- 


    // 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); 

Wenn ich meine app, die ich unten Fehler sehen laufen,

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/sidenav/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/toolbar/ Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:16 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular2-material/button (…)(anonymous function) @ localhost/:16 http://localhost:3000/node_modules/@angular2-material/card/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/input/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/checkbox/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/radio/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/icon/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/list/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

How to integrate angular2-material (alpha 8.2) with angular2-Quickstart app

Sie können meine obige Frage überprüfen, die eine Antwort selbst hat.

Answer 2

Sie Materialkomponenten separat hinzufügen sollten, wie und wann in system-config.ts benötigt:

1. eckig-cli targeting dist/ directory

const map: any = { 
    '@angular2-material/core': 'vendor/@angular2-material/core' 
}; 

const packages: any = { 
    '@angular2-material/core': { 
    format: 'cjs', 
    defaultExtension: 'js', 
    main: 'core.js' 
    } 
}; 

Und in angular-cli-build.js:

vendorNpmFiles: [ 
    'systemjs/dist/system-polyfills.js', 
    'systemjs/dist/system.src.js', 
    'zone.js/dist/*.js', 
    'es6-shim/es6-shim.js', 
    'reflect-metadata/*.js', 
    'rxjs/**/*.js', 
    '@angular/**/*.js', 
    '@angular2-material/**/*.js' 
] 

2. lite-Server oder HTTP-Server-Anwendung Root-Verzeichnis

const map: any = { 
    '@angular2-material/core': 'node_modules/@angular2-material/core' 
}; 

const packages: any = { 
    '@angular2-material/core': { 
    format: 'cjs', 
    defaultExtension: 'js', 
    main: 'core.js' 
    } 
}; 

Answer 3

Hier ist system.config.ts von der Quelle der Winkel material2 Targeting:

material2/GETTING_STARTED.md

npm

plunker

npm i @angular2-material/core --save

npm i @angular2-material/card --save

npm i @angular2-material/toolbar --save

npm i @angular2-material/button --save

npm i @angular2-material/slide-toggle --save

Dies funktioniert für: Angular 2 QuickStart Source

Komponente:

import { Component } from '@angular/core'; 
import { MD_SLIDE_TOGGLE_DIRECTIVES } from '@angular2-material/slide-toggle'; 
import { MD_TOOLBAR_DIRECTIVES } from '@angular2-material/toolbar'; 

import { MD_CARD_DIRECTIVES } from '@angular2-material/card'; 
import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button'; 
@Component({ 
    selector: 'my-app', 
    directives: [MD_TOOLBAR_DIRECTIVES,MD_CARD_DIRECTIVES,MD_SLIDE_TOGGLE_DIRECTIVES, MD_BUTTON_DIRECTIVES], 

    template: ` 

      <h1> 
     {{title}} 
     </h1> 
     <md-toolbar color="primary"> 
      Angular Material 2 App 
     </md-toolbar> 

     <div style="padding: 7px"> 
      <button md-button>Basic Button</button> 
      <button md-raised-button>Raised Button</button> 

      <md-slide-toggle>Slide Toggle</md-slide-toggle> 
     </div> 

      ` 
}) 
export class AppComponent { } 

system-config:

(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', 
      '@angular2-material/button': 'node_modules/@angular2-material/button', 
      '@angular2-material/card': 'node_modules/@angular2-material/card', 
      '@angular2-material/slide-toggle': 'node_modules/@angular2-material/slide-toggle', 
      '@angular2-material/toolbar': 'node_modules/@angular2-material/toolbar' 


     }; 

     // 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' 
      }, 
      '@angular2-material/card': { 
       main: 'card.js' 
      }, 
      '@angular2-material/button': { 
       main: 'button.js' 
      }, 
      '@angular2-material/toolbar': { 
       main: 'toolbar.js' 
      }, 
      '@angular2-material/slide-toggle': { 
       main: 'slide-toggle.js' 
      } 



     }; 

     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); 

     // No umd for router yet 
     packages['@angular/router'] = { 
      main: 'index.js', 
      defaultExtension: 'js' 
     }; 

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

     System.config(config); 

    })(this); 

Answer 4

Bitte aktualisieren @ angular2 RC4 zu RC5 und wie Konfigurationsdatei hinzufügen, unter

/** 
* 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);