2

尝试将角度材料添加到 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'

]

我收到错误，他们找不到角度材料文件。

如果有人有线索。我做错了什么？

4

3 回答 3

2

所有这些解决方案都有太多的事情要做。您应该做的第一件事是移除那些属于 Angular2-material 的 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 中，将 angular 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 的地图对象中，以便可以应用它......

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>

他们应该工作。

应用程序运行截图：

工作应用程序的屏幕截图

于 2016-07-19T09:49:11.117 回答
2

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

注意 map 和 packages 条目。

作为参考，请参阅来自 angular2-material 开发人员的此示例应用程序。

于 2016-05-14T19:40:23.510 回答
1

我对 "@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 */
      ];
于 2016-05-16T04:43:19.463 回答