how to use angular2-material with angular2 app

Question

NOTE: I don't use Angular-CLI

I have my running angular2-quick-start app.

package.json

NOTE: I have angular2-material reference in 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(…)

No not yet. It will work with Angular-cli but still don't know how to use it with core angular2 app. — micronyks
– micronyks, Commented Aug 15, 2016 at 8:01

Vijay Gajera · Accepted Answer · 2016-08-20 06:06:52Z

/**
 * 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/[email protected]',
    'ts':                         'https://npmcdn.com/[email protected]/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/[email protected]/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);

Please use @angular2 rc5 version replacing with rc4 and add above configuration its worked fine

rimraf · Accepted Answer · 2016-12-21 23:23:30Z

0

import @angular/material and not angular2-material

answered Dec 21, 2016 at 23:23

rimraf

4,1577 gold badges33 silver badges56 bronze badges

Collectives™ on Stack Overflow

how to use angular2-material with angular2 app

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related