[英]How to implement ng2-ui (NPM package) using Angular CLI?
I wish to use the following NPM package with Angular CLI: ng2-ui 我希望在Angular CLI中使用以下NPM包: ng2-ui
The implementation guide is for SystemJS, and not for Webpack, what is used by Angular CLI , what I have to use in this project. SystemJS的实现指南,而不是Webpack, Angular CLI使用的是什么,我必须在这个项目中使用。
What did I already do? 我做了什么?
npm install ng2-ui --save
npm install ng2-ui --save
包 Added the following line to app.module.ts
在
app.module.ts
添加了以下行
import { Ng2UIModule } from 'ng2-ui';
Ng2UIModule
to the imports
array in @NgModule
. Ng2UIModule
的imports
数组@NgModule
。 By this point I didn't use Ng2UIModule
in any of the components yet and before doing the mentioned operations the application worked just fine. 到目前为止,我还没有在任何组件中使用
Ng2UIModule
,在进行上述操作之前,应用程序工作正常。
When I try to run the application by ng serve
, I get the following error in console: 当我尝试通过
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'.
I guess the application simply lacks the following systemjs.config.js
settings: 我想应用程序只是缺少以下
systemjs.config.js
设置:
map['ng2-ui'] = 'node_modules/ng2-ui/dist';
packages['ng2-ui'] = {main: 'ng2-ui.umd.js', defaultExtension: 'js'}
Just I don't know how to make it work in the Angular CLI version of Webpack... 只是我不知道如何使它在Webpack的Angular CLI版本中运行...
(Currently I use Angular CLI 1.0.0-beta.17) (目前我使用Angular CLI 1.0.0-beta.17)
Thanks for your help! 谢谢你的帮助!
the ng2-ui has been changed to @ngui/overlay https://github.com/ng2-ui/overlay . ng2-ui已更改为@ ngui / overlay https://github.com/ng2-ui/overlay 。
Here is my sample code. 这是我的示例代码。
ex.component.html 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 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'); } }
Add import { NguiOverlayModule } from '@ngui/overlay';
import { NguiOverlayModule } from '@ngui/overlay';
添加import { NguiOverlayModule } from '@ngui/overlay';
to the module and add NguiOverlayModule to the imports array. 到模块并将NguiOverlayModule添加到imports数组。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.