Example to add angular2 material component

[Dmitry Vlasenko]

Hello. I need help with this lib. I want to add mdbutton component to my template. How can i do it.
I've installed 

npm install --save @angular2-material/core @angular2-material/checkbox @angular2-material/button

 And then, i added to my component *.ts file.

import {MdButton} from '@angular2-material/button';

But, i have error:

(index):92 Error: Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/@angular2-material/package.json(…) "Report this error at https://github.com/mgechev/angular2-seed/issues"

What can i do with it? 

[Jaakko Jokinen]

Your import statement is slightly incorrect. It should be:

import {MdButton} from '@angular2-material/button/button';

The file structure goes as follows node_modules/@angular2-material/button/button.ts.

[Juan Carlos Gutiérrez Barquero]

I was having a similar problem where I was getting:

angular2-polyfills.js:322 Error: Unable to load script http://localhost:3000/@angular2-material/button/button.js(…)

Clearly the path was missing the node_modules folder. I solved this by adding to System.config:

map: {
 '@angular2-material': 'node_modules/@angular2-material'
},

Also if you are getting:

system.src.js:2894 Uncaught Error: Module http://localhost:3000/node_modules/@angular2-material/button/button.js interpreted as cjs module format, but called System.register.

You need to change the suggested config from:

'@angular2-material/core': {
 format: 'cjs',
 defaultExtension: 'js',
 main: 'core.js'
},

To:

'@angular2-material/core': {
 format: 'register',
 defaultExtension: 'js',
 main: 'core.js'
},

Best!

[RamV]

Anyone able to solve this? I am getting the same error. Is there any plnkr or repo with an example?

[Todd LaMothe]

Juan Carlos's suggestion worked for me - was missing the proper mapping in System.config.

[Stéphane Mourgues]

Upgrading to 2.0.0-alpha2 solved many issues. If it's not enough I've published this small example which should work out of the box: https://github.com/StephaneMourgues/angular2-openlayers3-material

[Anderson Vasconcelos Pires]

Hi,

After try a lot of things, I remove the packageConfigPaths in System.config and works for me. I don't know why they add this in angular2-seed repository.

System.config({
	"defaultJSExtensions": true,
	"packageConfigPaths": [
	"/node_modules/*/package.json",
	"/node_modules/**/*/package.json"
	]

[Robert Eastham]

Much appreciated Stephane, merci boucoup!

[Dennis Smolek]

+1 * 1000

This is what caused the issue for me. I couldnt load all sorts of stuff in the RC and I was freaking out.. Many things in third party Angular2 stuff has had issues with the switches in the RC's so I assumed it was something else and not the seed..

Big thanks..

-D

[Sergey Khoroshavtsev]

You need in the file systejs.config.js add mapping:

var map = {
  'app':                        'app', // 'dist',
  'rxjs':                       'node_modules/rxjs',
  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
  '@angular':                   'node_modules/@angular',
  '@angular2-material':         'node_modules/@angular2-material'
};

var materialPackages=[
  '@angular2-material/core',
  '@angular2-material/button',
  '@angular2-material/card',
  '@angular2-material/checkbox',
  '@angular2-material/icon',
  '@angular2-material/input',
  '@angular2-material/list',
  '@angular2-material/progress-bar',
  '@angular2-material/progress-circle',
  '@angular2-material/radio',
  '@angular2-material/sidenav',
  '@angular2-material/toolbar'
];

materialPackages.forEach(function(pkgName) {
  var pkg=pkgName.split('/');
  packages[pkgName] = { main: pkg[1]+'.js', defaultExtension: 'js' };
});

суббота, 19 марта 2016 г., 18:09:29 UTC+2 пользователь Dmitry Vlasenko написал:

[Emi Smith]

For RC.1, use this:

protected SYSTEM_CONFIG_DEV: any = {
  defaultJSExtensions: true,
  packageConfigPaths: [
    `${this.APP_BASE}node_modules/*/package.json`,
    `${this.APP_BASE}node_modules/**/package.json`,
    `${this.APP_BASE}node_modules/@angular/*/package.json`,
    `${this.APP_BASE}node_modules/@angular2-material/*/package.json`
  ],
  paths: {
    [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
    'rxjs/*': `${this.APP_BASE}rxjs/*`,
    'app/*': `/app/*`,
    '*': `${this.APP_BASE}node_modules/*`
  },
  packages: {
    rxjs: { defaultExtension: false }
  }
};

[Hyunwoo Bae]

systemjs.config.js

var materialPkgs = [

    'core',

    'button',

    'checkbox',

  ];

function packMaterial(pkgName) {

    packages['@angular2-material/' + pkgName] = { main: pkgName + '.js', defaultExtension: 'js'};

  }

var setMaterialConfig = packMaterial;

  materialPkgs.forEach(setMaterialConfig);

2016년 3월 20일 일요일 오전 1시 9분 29초 UTC+9, Dmitry Vlasenko 님의 말:

[Siarhei Hladkou]

Thanks, this works with rc4 as well. I spent days looking how to make ng2-m friend with rc4.

[Heinz Bigler]

In the current angular-seed project add to seed.config.ts

SYSTEM_CONFIG_DEV: any = {

    defaultJSExtensions: true,

    paths: {

...

'@angular/material': 'node_modules/@angular/material/bundles/material.umd.js',

...

or add @angular/material as an additional package to project.config.ts (which seems to be the recommended way)

like:

let additionalPackages: ExtendPackages[] = [{

      name: '@angular/material',

    // Path to the package's bundle

      path: 'node_modules/@angular/material/bundles/material.umd.js'

    }];

    this.addPackagesBundles(additionalPackages);