應用於Angular 2 Quickstart的angular2-mdl組件

Question

我正在嘗試將angular2-mdl組件與Quickstart Angular 2示例（ https://angular.io/guide/quickstart ）一起使用。 我將這些依賴項添加到默認的package.json文件中：

"angular2-mdl": "2.1.0",
"@angular2-mdl-ext/popover": "*",
"@angular2-mdl-ext/select": "0.4.0",

然后我運行“npm install”下載所需的模塊。 我可以看到我的node_modules目錄中安裝的模塊。 最后我補充說：

'angular2-mdl': 'npm:angular2-mdl'

到默認的systemjs.config.js文件：

map: {
  // our app is within the app folder
  app: 'app', // 'app',
  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  // other libraries
  'rxjs': 'npm:rxjs',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
  'angular2-mdl': 'npm:angular2-mdl'
},

和：

'angular2-mdl': { 
    main: 'components/index.js'
  }

到packages參數：

packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'angular2-mdl': { 
    main: 'components/index.js'
  }
}

然后我在app.module.ts中導入了模塊：

import { MdlModule } from 'angular2-mdl';

一旦我將MdlModule添加到NgModule進口語句，應用程序就會停止工作：

@NgModule({
   imports: [
     BrowserModule,
     FormsModule,
     MdlModule
   ],
   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

瀏覽器控制台說：

http：// localhost：3000 / traceur無法加載資源：服務器響應狀態為404（未找到）localhost /：19錯誤：（SystemJS）XHR錯誤（404 Not Found）loading http：// localhost：3000 / traceur （...）（匿名函數）@ localhost /：19

將angular2-mdl模塊添加到我的應用程序的正確方法是什么？

Answer 1

不幸的是，systemjs無法讀取package.json文件中的主條目。 你會找到angular2-mdl ：

"main": "./bundle/angular2-mdl.js"

從@angular導入的模塊沒有區別。 以下應該有效：

'angular2-mdl': 'npm:angular2-mdl/bundle/angular2-mdl.js'

從systemjs.config.js文件中刪除所有其他angular2-mdl配置。 如果它不起作用：請發布完整的systemjs.config.js文件。

對於popover和select你需要做同樣的事情（那里是"main": "./index.umd.js"所以映射是'npm:@angular2-mdl-ext/popover/index.umd.js' ）