如何在angular-cli中添加angular2材料？

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?

Answer 1

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) => {
    cliSystemConfigPackages[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'
    },
    packages: cliSystemConfigPackages
});

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

Note the map and packages entries.

For reference, see this sample app from one the angular2-material developers.

Answer 2

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) =>{
    packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`}
});  

we're almost done in system-config.ts, last thing we need to add the main vendor package to the map object of the system.config so it can be applied...

System.config({
    map: {
      '@angular': 'vendor/@angular',
      'rxjs': 'vendor/rxjs',
      'main': 'main.js',
      '@angular2-material': 'vendor/@angular2-material'
    },
    packages: cliSystemConfigPackages
});

Your angular-cli-build.js file is fine, if you configured the default extension to be 'js' like i did, and probably you did too, you don't need to add it to the vendorNpmFiles. You could just as simply have '@angular2-material/**/*'

And we're done with the configuration.

import the directives in your component
import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';

add them to your directives array
directives: [ MD_BUTTON_DIRECTIVES ]

and use them in your markup

<h1>
  {{title}}
</h1>
<button md-button>FLAT</button>
<button md-raised-button>RAISED</button>
<button md-fab>add</button>
<button md-mini-fab>add</button>
<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>  

They should work.

Screenshot of app working:

Answer 3

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