how to add angular2 material to angular-cli?

By : kero
Source: Stackoverflow.com
Question!

Trying to add angular materials to angular-cli but angular-materials never show up in vendor files. I added materials files to system-config.ts as shown below:

      const barrels: string[] = [
     // Angular specific barrels.
      '@angular/core',
      '@angular/common',
      '@angular/compiler',
      '@angular/http',
      '@angular/router',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',

       // Thirdparty barrels.
      'rxjs',

     './button/button.js',
    './card/card.js',
    './checkbox/checkbox.js',
    './input/input.js',
     './progress-circle/progress-circle.js',
     './sidenav/sidenav.js',
    './toolbar/toolbar.js',



        // App specific barrels.
         'app',
        'app/shared',
          /** @cli-barrel */
      ];

        const _cliSystemConfig = {};
       barrels.forEach((barrelName: string) => {
      _cliSystemConfig[barrelName] = { main: 'index' };
         });

            /** Type declaration for ambient System. */
               declare var System: any;

              // Apply the CLI SystemJS configuration.
               System.config({
              map: {
             '@angular': 'vendor/@angular',
             'rxjs': 'vendor/rxjs',
            'main': 'main.js',
            ' @angular2-material':'vendor/ @angular2-material'   
              },
          packages: _cliSystemConfig
                });

             // Apply the user's configuration.
           System.config({ map, packages });

Also I added to vedornpmfiles array in angular-cli-build.js as shown below:

  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'

]

I am getting error that they cant find angular materials files.

If anyone has got a clue. What I am doing wrong?

By : kero


Answers

I had the same problem with "@angular/http" . So The way I fixed the problem ,it might help you too -

Open your package.json and add this line under the dependencies -

'@angular2-material': "your version"

Then open your terminal on that folder and type -

npm install

It will update your system-config.ts with

const barrels: string[] = [
     // Angular specific barrels.
      '@angular/core',
      '@angular/common',
      '@angular2-material',
      '@angular/compiler',
      '@angular/http',
      '@angular/router',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',

       // Thirdparty barrels.
      'rxjs',

     './button/button.js',
    './card/card.js',
    './checkbox/checkbox.js',
    './input/input.js',
     './progress-circle/progress-circle.js',
     './sidenav/sidenav.js',
    './toolbar/toolbar.js',

         'app',
        'app/shared',
          /** @cli-barrel */
      ];
By : pd farhad


All these solutions have too much going on. First thing you should do is remove those barells that belong to Angular2-material.

'./button/button.js',
'./card/card.js',
'./checkbox/checkbox.js',
'./input/input.js',
 './progress-circle/progress-circle.js',
 './sidenav/sidenav.js',
'./toolbar/toolbar.js',

in your system-config.ts add the angular 2 vendor path to the map object:

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

Then here's the tricky bit, the Packages object is empty const packages: any {}; (unless you have already installed some third party packages and added them, yours will be too). So we have to declare the material packages we want to use, we do this by creating a array of the package names

const materialPkgs[]: string[]= [
    'core',
    'button'
];

In this case I'm only importing button and core for simplicity's sake. Core must always be imported the other modules depend on it.
Next we loop through these materialPkgs and add them to packages using a forEach function

materialPkgs.forEach((pkg) =


Your system-config.ts should look like this:

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
    '@angular2-material': 'vendor/@angular2-material',
};

/** User packages configuration. */
const packages: any = {
    '@angular2-material/core': {
        format: 'cjs',
        defaultExtension: 'js',
        main: 'core.js'
    },
    '@angular2-material/sidenav': {
        format: 'cjs',
        defaultExtension: 'js',
        main: 'sidenav.js'
    },
    '@angular2-material/toolbar': {
        format: 'cjs',
        defaultExtension: 'js',
        main: 'toolbar.js'
    },
    '@angular2-material/card': {
        format: 'cjs',
        defaultExtension: 'js',
        main: 'card.js'
    },

  // add missing material elements as desired 
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
    // Angular specific barrels.
    '@angular/core',
    '@angular/common',
    '@angular/compiler',
    '@angular/http',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',

    // Thirdparty barrels.
    'rxjs',

    // App specific barrels.
    'app',
    'app/shared',
    'app/imagecard-component',
  'app/search-component',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) =
By : martin


This video can help you solving your question :)
By: admin