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-materials开发人员的sample app。

Answer 2

所有这些解决方案都有太多进展。你应该做的第一件事是删除那些属于Angular2材质的裸机。

'./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'
];

在这种情况下，为了简单起见，我只导入按钮和核心。核心必须始终导入其他模块依赖它接下来，我们遍历这些materialPkgs并使用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>

他们应该工作。

应用工作的屏幕截图：

Screenshot of working app

Answer 3

我和＃34; @ angular / http＆＃34;有同样的问题。。所以我解决这个问题的方式也可能对你有帮助 -

打开你的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 */
      ];

如何将angular2材质添加到angular-cli？

3 个答案: