システム設定jsモジュールをインストールする際の角度2の問題。説明

Question

私は最近Angular 2で開発を始めました。そこには多くのチュートリアルがあります。しかし、私がまだ理解できないことの1つはsystemjs.config.jsです。

なぜ私はそれが使用されているのか、その主な目的は何かを理解しています。しかし、それを使って他の依存関係を追加する方法は、はっきりしていません。

私は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-アイコン」が知られている要素ではない。 「MDL-アイコン」が角度成分であれば1、それは、このモジュール の一部であることを確認してください。 2. 'mdl-icon'の場合

このファイルの操作方法を説明してください。または少なくとも材料デザインLiteモジュールを含める方法。

Answer 1

'vendor'は、パッケージを提供する場所を表す一般的な用語です。したがって、CDNの形式でも、場合によってはnpmでもかまいません。

まず最初に行うには、npm:で最もおそらく

Answer 2

存在しないベンダーはまだないというフォルダとは対照的に、それはあなたのプロジェクトのnode_modulesフォルダにことになるだろうそのようにvendor/を交換するだろうどのようにすべてのものが動作するか知っている。しかし、それを働かせるためには以下のことをしてください。

(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); 

そして答えのためのあなたのapp.module.js

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