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

Question

試圖向angular-cli中添加角度材料，但是角度材料永遠不會出現在供應商文件中。 我將材料文件添加到system-config.ts中，如下所示：

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

另外，我在angular-cli-build.js中添加了vedornpmfiles數組，如下所示：

  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'

]

我收到錯誤消息，他們找不到角形材料文件。

如果有人知道。 我做錯了什么？

Answer 1

您的system-config.ts應該如下所示：

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

注意地圖和包裹條目。

作為參考，請參閱angular2-material開發人員的示例應用程序 。

Answer 2

所有這些解決方案都在進行中。 您應該做的第一件事是刪除屬於Angular2材質的那些barells。

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

在system-config.ts中，將角度2供應商路徑添加到地圖對象：

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

然后是個棘手的問題，Packages對象是空的const packages: any {}; （除非您已經安裝了一些第三方軟件包並添加了它們，否則您的軟件包也將如此）。 因此，我們必須聲明要使用的材料包裝，我們通過創建包裝名稱數組來進行聲明

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

在這種情況下，為簡單起見，我僅導入按鈕和核心 。 必須始終導入 Core，其他模塊也依賴於此。
接下來，我們遍歷這些materialPkg，並使用forEach函數將它們添加到包中

materialPkgs.forEach((pkg) =>{
    packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`}
});  

我們幾乎已經在system-config.ts中完成了，最后，我們需要將主供應商軟件包添加到system.config的map對象中，以便可以應用...

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

您的angular-cli-build.js文件很好，如果您像我一樣將默認擴展名配置為'js'，並且可能也這樣做，則無需將其添加到vendorNpmFiles中。 您可以簡單地使用'@angular2-material/**/*'

至此我們完成了配置。

將指令導入您的組件中
import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';

將它們添加到指令數組
directives: [ MD_BUTTON_DIRECTIVES ]

並在標記中使用它們

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

他們應該工作。

應用程序工作的屏幕截圖：

Answer 3

我對“ @ angular / http”有同樣的問題。 所以我解決問題的方式可能也對您有幫助-

打開package.json並在依賴項下添加以下行-

'@angular2-material': "your version"

然后在該文件夾中打開終端，然后輸入-

npm install

它將使用以下命令更新您的system-config.ts

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