how to use angular2-material with angular2

Question

NOTE: I don't use Angular Cli.

I added @angular2-material/core package. Then I installed other angular2-material components like @angular2-material/button, @angular2-material/card and so on.

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

When I run my app I see below errors,

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)

stackoverflow.com/questions/39557819/… You can check my above question which has an answer itself. — micronyks
– micronyks, Commented Nov 3, 2016 at 6:21

codef0rmer · Accepted Answer · 2016-09-11 15:08:00Z

1

You should add material components separately as and when needed in system-config.ts:

1. angular-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'
  }
};

And 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 or http-server targeting application root directory

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

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

edited Sep 11, 2016 at 15:08

answered Jul 17, 2016 at 7:28

codef0rmer

10.5k9 gold badges55 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

micronyks Over a year ago

I don't use angular cli.

codef0rmer Over a year ago

Okay. Did you try the SystemJS suggestion?

micronyks Over a year ago

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

but still its not working.

codef0rmer Over a year ago

That's because node_modules/ folder is not inside the root of the web server, probably app/ folder. The angular-cli automatically takes care of moving third-party plugins into vendor/ and it works out of the box. You might have to move the needed plugins into the app root folder while starting a webserver.

micronyks Over a year ago

So you want me to install angular2-material plugin into app folder?

|

KB_ · Accepted Answer · 2016-07-17 10:36:25Z

Here is system.config.ts from the source of angular material2:

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

This works for :Angular 2 QuickStart Source

Component:

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

@micronyks It will not work as I suggested. You've to move all the npm modules under the root directory while running a web server.
@codef0rmer nothing is working out for me. I don't know why.
@micronyks If you carefully read my comments below, you will understand why it's not working. The only thing I'm doubtful about is whether my solution is right or not. But yes, worth a try.
@codef0rmer. What do you think that I haven't tried your solution??? I have already tried but nothing seems to be working out for me.
@micronyks I'm pretty sure that copying modules under the web server root folder should definitely work.

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

Please update @angular2 RC4 to RC5 and add configuration file like below

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

Collectives™ on Stack Overflow

how to use angular2-material with angular2

3 Answers 3

1. angular-cli targeting `dist/` directory

2. lite-server or http-server targeting application root directory

8 Comments

8 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1. angular-cli targeting dist/ directory

2. lite-server or http-server targeting application root directory

8 Comments

8 Comments

Comments

Linked

Related

1. angular-cli targeting `dist/` directory