Angular-cli，RC5 材料 2：意外的令牌导入

Question

我正在尝试使用 Angular-cli RC5 配置 Material 2。当我尝试在 app.module.ts 中加载 material 按钮组件时，出现以下错误。

zone.js:461 Unhandled Promise rejection: SyntaxError: Unexpected token import
        at Object.eval (http://localhost:4203/app/app.module.js:22:16)
        at eval (http://localhost:4203/app/app.module.js:47:4)
        at eval (http://localhost:4203/app/app.module.js:48:3)
    Evaluating http://localhost:4203/vendor/@angular2-material/button/button.js
    Evaluating http://localhost:4203/app/app.module.js
    Evaluating http://localhost:4203/main.js
    Error loading http://localhost:4203/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: SyntaxError: Unexpected token import(…)

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "^0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular2-material/core": "^2.0.0-alpha.7-4",
    "@angular2-material/button": "^2.0.0-alpha.7-4",,
    "es6-shim": "0.35.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "0.6.12",
    "d3": "^4.2.2"
  },
  "devDependencies": {
    "@angular/tsc-wrapped": "^0.3.0",
    "angular-cli": "^1.0.0-beta.10",
    "codelyzer": "0.0.20",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "protractor": "3.3.0",
    "ts-node": "0.5.5",
    "tslint": "3.11.0",
    "typescript": "^2.0.2",
    "typings": "1.3.1"
  }
}

angular-cli-build.js

/* global require, module */

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/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      '@angular2-material/**/*',
    ]
  });
};

system.config.ts

"use strict";

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

/** User packages configuration. */
const materialPackages:string[] = [
  'core',
  'button'
];
const packages:any = {};
materialPackages.forEach(name => {
  packages[`@angular2-material/${name}`] = {
    format: 'cjs',
    defaultExtension: 'js',
    main: name
  };
});

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

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

app.module.ts

import {NgModule}           from '@angular/core';
import {BrowserModule}      from '@angular/platform-browser';
import {AppComponent}       from './app.component';
import {HttpModule}         from '@angular/http';
import {FormsModule}        from '@angular/forms';
import {RouterModule}       from '@angular/router';
import {MdButtonModule}     from '@angular2-material/button';
import {MdCoreModule}       from '@angular2-material/core';

@NgModule({
  declarations: [AppComponent],
  imports     : [BrowserModule,
    HttpModule,
    FormsModule,
    RouterModule,
    MdButtonModule
    MdCoreModule],
  bootstrap   : [AppComponent],
})
export class AppModule {
}

有什么建议吗？

谢谢！

Answer 1

我的 app.module.ts 有一个来自核心的 ripple 模块的说明，可以防止在单击按钮时向页面添加间隙的错误

import { MdRippleModule } from '@angular2-material/core';
import { MdButtonModule } from '@angular2-material/button';

要使用该模块，您需要将以下内容添加到 package.json

"@angular2-material/core": "^2.0.0-alpha.7-4",

就像您对 material2 按钮所做的那样，您还需要在项目中安装该核心模块。

https://www.npmjs.com/package/@angular2-material/core

此外，我建议在您的原型变得太大之前考虑切换 angular-cli webpack。这样做会整理您正在使用的设置，在捆绑时提供更好的性能，并且您将跳入 webpack hypetrain，这是一项很好的投资，因为 angular-cli 正在从 systemjs 转移到 webpack。

Angular-cli，RC5 材料 2：意外的令牌导入

Angular-cli, RC5 material2: Unexpected Token import

angular-cli

angular-material2

angular