1

我用了：

  • 角-cli
  • 角度 2
  • 打字稿
  • 系统js

我要补充：棱角材料

我认为问题是：

  • 映射不工作/不导入

错误- 打字稿编译器 无法映射类型

我没有打字稿 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'
      ]
    }
  });
};

系统配置.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 serve时遇到的错误：

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 --版本 3.9.2

节点--版本 v4.2.6

4

1 回答 1

1

Angular-CLI 已经从 SystemJS 转移到了 Webpack。

因此，现在的指令有很大不同。我在此处发布入门指南的内容，以提高此答案的质量，不仅包括链接。

使用 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 材质 NgModule

src/app/app.module.ts ts import { MaterialModule } from '@angular/material'; // other imports @NgModule({ imports: [MaterialModule.forRoot()], ... }) export class PizzaPartyAppModule { }

包括核心和主题风格：

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

:trident: 有关说明，请参阅主题指南。

手势的附加设置

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

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

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

bash npm install --save hammerjs

安装后，在您的应用模块上导入 HammerJS。 src/app/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' } });

[可选] 使用 Material Design 图标md-icon：

  • 如果你想在 Angular Material 组件之外使用 Material Design 图标，请在你的index.html.
    md-icon支持任何字体图标或 svg 图标，因此这只是图标源的一种选择。

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

Angular Material 2 项目示例

于 2017-01-05T20:16:09.467 回答