缺少Angular Material＆amp;＆amp; amp;＆amp ;; SystemJS＆amp;＆amp; Angular2

时间：2016-08-22 10:17:37

标签： typescript systemjs angular-cli angular-material2

我用过：

  • 角-CLI
  • angular 2
  • 打字稿
  • systemjs

我希望添加：有角度的材料

我认为问题是：

  • 映射无效/不导入

错误   - typescript编译器无法映射类型

我没有打字稿XP，第一步是它。

角-CLI-build.js 

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      '@angular2-material/**/*'
    ],
    sassCompiler: {
      includePaths: [
        'src/app'
      ]
    }
  });
};

系统config.ts 

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

/** User packages configuration. */
const packages: any = {
  // add missing material elements as desired
};
const materialPkgs:string[] = [
  'core',
  'button',
  'card'

];

materialPkgs.forEach((pkg) => {
  packages[`@angular2-material/${pkg}`] = { main: `${pkg}.js`,
                                            format: 'cjs',
                                            defaultExtension: 'js'};
});
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * 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/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/index',
  'app/navigation',
  'app/header',
  /** @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
});

我的组件使用材料

import { Component, OnInit } from '@angular/core';
import { MdButtonModule } from '@angular2-material/button';

@Component({
      moduleId: module.id,
      selector: 'app-index',
      templateUrl: 'index.component.html',
      imports: [ MdButtonModule ],
      styleUrls: ['index.component.css']
})
export class IndexComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

运行 ng服务时出现的错误：

lehrer git:(master) ✗ ng build
Could not start watchman; falling back to NodeWatcher for file system events.
  Visit http://ember-cli.com/user-guide/#watchman for more info.
  Build failed.
  The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/src/app/component/index/index.component.ts (9, 3): Argument of type '{ moduleId: string; selector: string; templateUrl: string; imports: typeof MdButtonModule[]; styl...' is not assignable to parameter of type '{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin...'.
  Object literal may only specify known properties, and 'imports' does not exist in type '{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin...'.
/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/src/typings.d.ts (2, 1): File '/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/node_modules/@angular2-material/core/core.d.ts' not found.
/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/src/typings.d.ts (3, 1): File '/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/node_modules/@angular2-material/button/button.d.ts' not found.
/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/src/typings.d.ts (4, 1): File '/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/node_modules/@angular2-material/card/card.d.ts' not found.
  at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
at BroccoliTypeScriptCompiler.build (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
at /Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
at lib$rsvp$$internal$$tryCatch (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1019:11)
at lib$rsvp$asap$$flush (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:419:9)
at process._tickCallback (node.js:348:13)

The broccoli plugin was instantiated at:
  at BroccoliTypeScriptCompiler.Plugin (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
at BroccoliTypeScriptCompiler (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:27:10)
at Angular2App._getTsTree (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/angular2-app.js:331:18)
at Angular2App._buildTree (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/angular2-app.js:124:23)
at new Angular2App (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
at module.exports (/Users/mrx/Documents/project/learn/angular2/lehrer/angular-cli-build.js:6:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
at new Class (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
at Class.module.exports.Task.extend.run (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
at /Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
at lib$rsvp$$internal$$tryCatch (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at /Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
at lib$rsvp$asap$$flush (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

npm --version 3.9.2

node --version v4.2.6

1 个答案:

答案 0 :(得分：1)

Angular-CLI已从SystemJS迁移到Webpack。

因此instructions现在有点不同了。我在此处发布了“入门指南”的内容，不仅包括链接，还可以提高此答案的质量。

使用Angular CLI开始使用Angular Material 2.

安装CLI

bash npm install -g angular-cli

创建新项目

bash ng new my-project

新命令使用Angular应用程序的构建系统创建一个项目。

安装Angular Material组件

bash npm install --save @angular/material

导入Angular Material NgModule

<强>的src /应用程序/ app.module.ts ts import { MaterialModule } from '@angular/material'; // other imports @NgModule({ imports: [MaterialModule.forRoot()], ... }) export class PizzaPartyAppModule { }

包括核心和主题样式：

必需将所有核心和主题样式应用于您的应用程序。你也可以 使用预先构建的主题，或定义自己的自定义主题。

：三叉戟：请参阅主题指南。

手势的其他设置

某些组件（md-slide-toggle，md-slider，mdTooltip）依赖于此 HammerJS用于手势。为了获得这些的完整功能集 组件，HammerJS必须加载到应用程序中。

您可以通过npm（CDN）将HammerJS添加到您的应用程序中 （例如Google CDN）或服务 直接从你的应用程序。

如果你想从npm包含HammerJS，你可以安装它：

bash npm install --save hammerjs

安装完成后，在应用程序模块中导入HammerJS。 的的src /应用程序/ app.module.ts ts import 'hammerjs';

配置SystemJS

如果您的项目使用SystemJS进行模块加载，则需要添加@angular/material 到SystemJS配置：

js System.config({ // existing configuration options map: { ..., '@angular/material': 'npm:@angular/material/bundles/material.umd.js' } });

[可选]使用带有md-icon的材质设计图标：

  • 如果您想使用除Angular Material组件之外的Material Design图标， 在index.html中加载Material Design字体 md-icon支持任何字体图标或svg图标，因此这只是图标来源的一个选项。

<强> SRC / index.html中 html <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

示例Angular Material 2项目

相关问题
最新问题