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

Question

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

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" 
    } 
} 

角-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具有从核心纹波模块，阻止添加空白，按钮的页面的错误点击

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

此外，我会建议寻找到之前你的原型变得太大了角CLI的WebPack切换。这样做会减弱你使用的设置，在捆绑时提供更好的性能，你会跳过webpack hypertrain，这是一个很好的投资，因为angular-cli正在从systemjs移动到webpack。