系統配置js安裝模塊的Angular 2問題。解釋

我最近開始使用Angular 2進行開發。這裏有很多教程。但有一件事我不能理解的是systemjs.config.js。系統配置js安裝模塊的Angular 2問題。解釋

我明白它爲什麼被使用，它的主要目的是什麼。但如何使用它來添加其他依賴關係還不夠清楚。

我使用的是Starter存儲庫中的默認包。但正如我所提到的，我有添加新模塊的麻煩。

我已經嘗試了幾次，包括不同的模塊，但經過幾次重試後，我放棄了。

我試圖找到一個很好的教程或文檔來解釋如何在Angular 2的上下文中處理這個工具，但沒有結果。

現在我無法安裝Material Design Lite模塊。

這是我systemjs.config.js文件

(function (global) { 
    System.config({ 

     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      '@angular-mdl/core': 'vendor/@angular-mdl/core', 
      // 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', 
      '@angular/material': 'npm:@angular/material/bundles/material.umd.js', 
      // other libraries 
      'hammerjs': 'npm:hammerjs/hammer.js', 
      'rxjs': 'npm:rxjs', 
      'angular2-mdl': 'vendor/angular2-mdl', 
      'primeng': 'npm:primeng' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       defaultExtension: 'js' 
      }, 
      'angular2-mdl': {main: 'bundle/angular2-mdl.js'}, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      primeng: { 
       defaultExtension: 'js' 
      } 
     } 

    }); 
})(this);

我index.html

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"> 
<script src="/node_modules/material-design-lite/material.min.js"></script> 
<link rel="stylesheet" href="/node_modules/material-design-icons/iconfont/material-icons.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet"> 
<link rel="stylesheet" href="bootstrap.min.css"> 
<link rel="stylesheet" href="style.css">

但我仍然得到下面的錯誤。

模板解析錯誤：「MDL-圖標」不是已知的元件：1.如果「MDL-圖標」是角度成分，然後驗證它是該模塊的一部分。 2.如果'mdl-icon'

請解釋如何使用此文件。或者至少如何包含Material Design Lite模塊。

來源

2017-03-20 Ptzhub

'vendor'是一個通用術語，用於描述提供軟件包的地方，因此它可能是某種形式的CDN，或者在您的情況下是npm。

辦將與npm:更換vendor/的第一件事情，這樣它會看着你的項目的node_modules文件夾，而不是一個文件夾，名爲供應商，其最有可能是不存在

來源

2017-03-20 14:55:57 Borquaye

感謝您的回答，但仍然無法正常工作。（ – Ptzhub

喂，在某處你的錯誤，應該給你它試圖用來查找你的包的路徑我已經看過node_modules中的angular2-mdl;嘗試將'angular2-mdl'映射的路徑更改爲等於'npm：angular2-mdl/bundle/angular2-mdl .js文件 – Borquaye

仍然不知道所有這些東西如何工作。但爲了讓它工作，請執行以下操作。

(function (global) { 
    System.config({ 

     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 

      'angular2-mdl': 'npm:angular2-mdl/', 

     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      'angular2-mdl': {main: 'bundle/angular2-mdl.js'}, 

     } 

    }); 
})(this);

而且不要忘記導入MdlModule在app.module.js

@NgModule({ 
    imports: [BrowserModule, MdlModule, HttpModule, MaterialModule, RoutingModule],

來源

2017-03-20 16:20:27 Ptzhub

系統配置js安裝模塊的Angular 2問題。解釋

回答

相關問題