Question

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

实施指南适用于SystemJS，而不适用于Webpack， Angular CLI 使用的内容，我必须在此项目中使用。

我已经做了什么？

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

到目前为止，我还没有在任何组件中使用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'}

我不知道如何在Webpack的 Angular CLI 版本中使用它...

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

感谢您的帮助！

Answer 1

ng2-ui已更改为@ ngui / overlay https://github.com/ng2-ui/overlay。

这是我的示例代码。

ex.component.html

＆＃13;

<div class = "images">
		<h3>Panacotta Vanilla</h3>
				<img src = "photo1.png.png">
				<p>recipe ingridients</p>
				<ol id="mylist">
					<li>Macro free Ranged Chicken</li>
					<li>Cover chicken in almond meal</li>
					<li>Add cayenne pepper, chilli flakes, mixed herbs and paprika</li>
					<li>Cook until all pink of chicken disappears 
					Salad</li>

				</ol>
		</div>

＆＃13;

ex.component.ts

＆＃13;

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

＆＃13;

将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'); } }添加到模块并将NguiOverlayModule添加到imports数组。

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

1 个答案: