Angular CLIを使用してng2-ui（NPMパッケージ）を実装する方法は？

Question

は、私は角度CLIで、次のNPMパッケージを使用したい：ng2-ui

実装ガイドはSystemJSのためであり、WebPACKのために、何が、私はこのプロジェクトで使用するために持っているものCLI、角度で使用されていません。

私はすでに何をしましたか？ npm install ng2-ui --save

てパッケージをインストール

• は@NgModuleでimports配列に追加Ng2UIModuleapp.module.ts

  import { Ng2UIModule } from 'ng2-ui'; 
  

• に次の行を追加しました。

これまでのところ、いずれのコンポーネントでもまだNg2UIModuleを使用していませんでしたが、前述の操作を行う前に、アプリケーションは正常に動作しました。私はng serveでアプリケーションを実行しようとすると

、私は、コンソールに次のエラーを取得：

map['ng2-ui'] = 'node_modules/ng2-ui/dist'; 
packages['ng2-ui'] = {main: 'ng2-ui.umd.js', defaultExtension: 'js'} 

ただ、Iドン：私は、アプリケーションが単に次systemjs.config.jsの設定を欠い

ERROR in [default] C:\tools\test-package.net\node_modules\ng2-ui\dist\index.d.ts:1:31 
Cannot find module 'ng2-overlay'. 

ERROR in [default] C:\tools\test-package.net\node_modules\ng2-ui\dist\index.d.ts:2:32 
Cannot find module 'ng2-map'. 

ERROR in [default] C:\tools\test-package.net\node_modules\ng2-ui\dist\index.d.ts:3:60 
Cannot find module 'ng2-popup'. 

ERROR in [default] C:\tools\test-package.net\node_modules\ng2-ui\dist\index.d.ts:4:39 
Cannot find module 'ng2-scrollable'. 

を推測します角型CLI Webpackのバージョン...

（現在、Angular CLI 1.0.0-beta.17を使用しています）

ありがとうございました！

Answer 1

ng2-uiが@ ngui/overlay https://github.com/ng2-ui/overlayに変更されました。

ここは私のサンプルコードです。

ex.component.html

<div id='div1' class='container row'> 
 
    Div 1 
 

 

 
</div> 
 

 
<div id="overlay" ngui-overlay-of="div1" style='background-color:black'> 
 
    Loading data...... 
 
</div> 
 

 
<div id="overlay2" ngui-overlay-of="div1" style='background-color:blue'> 
 
    Loading data...... 
 
</div> 
 

 
<button (click)="showOverlay($event)" class='btn btn-success'>Show Overlay</button> 
 
<button (click)="hideOverlay()" class='btn btn-danger'>Hide Overlay</button> 
 

 
<br /><br /> 
 
<button (click)="showOverlay2($event)" class='btn btn-success'>Show Overlay</button> 
 
<button (click)="hideOverlay2()" class='btn btn-danger'>Hide Overlay</button>

ex.component.ts

import { Component, OnInit } from '@angular/core'; 
 
import { NguiOverlayManager } from '@ngui/overlay'; 
 
@Component({ 
 
    selector: 'app-ex', 
 
    templateUrl: './ex.component.html', 
 
    styleUrls: [ './ex.component.css' ], 
 
    providers:[NguiOverlayManager] 
 
    
 
}) 
 
export class ExComponent implements OnInit { 
 

 
    constructor(private overManager:NguiOverlayManager) { } 
 

 
    ngOnInit() { 
 
    } 
 

 
    showOverlay(event: Event) { 
 

 
    this.overManager.open('overlay',event); 
 
    } 
 

 
    hideOverlay() { 
 
    this.overManager.close('overlay'); 
 
    } 
 

 
    showOverlay2(event: Event) { 
 

 
    this.overManager.open('overlay2', event); 
 
    } 
 

 
    hideOverlay2() { 
 
    this.overManager.close('overlay2'); 
 
    } 
 

 
}

モジュールにimport { NguiOverlayModule } from '@ngui/overlay';を追加し、輸入アレイにNguiOverlayModuleを追加します。