如何使用 Angular CLI 实现 ng2-ui（NPM 包）？答案

【问题标题】：How to implement ng2-ui (NPM package) using Angular CLI?如何使用 Angular CLI 实现 ng2-ui（NPM 包）？
【发布时间】：2017-07-06 07:53:44
【问题描述】：

我希望在 Angular CLI 中使用以下 NPM 包：ng2-ui

实施指南适用于 SystemJS，而不适用于 Webpack，Angular CLI 使用的是什么，我在这个项目中必须使用什么。

我已经做了什么？

由npm install ng2-ui --save安装包
在app.module.ts中添加了以下行
```
import { Ng2UIModule } from 'ng2-ui';
```
在@NgModule 的imports 数组中添加了Ng2UIModule。

到目前为止，我还没有在任何组件中使用Ng2UIModule，在执行上述操作之前，应用程序运行良好。

当我尝试通过ng serve 运行应用程序时，我在控制台中收到以下错误：

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'.

我猜该应用程序只是缺少以下systemjs.config.js 设置：

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

只是我不知道如何让它在 Angular CLI 版本的 Webpack 中工作......

（目前我使用 Angular CLI 1.0.0-beta.17）

感谢您的帮助！

【问题讨论】：

嗨，erik，你知道如何让它工作吗？
我最终改用了不同的包。就像ng2-dnd 用于拖放和ngx-bootstrap 用于其他UI 好东西以及ng2-select。我希望它可以帮助你@LintonB
感谢@Erik Kránicz

标签： angular npm webpack systemjs angular-cli

【解决方案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添加到导入数组中。

【讨论】：