如何使用 Angular CLI 实现 ng2-ui(NPM 包)?
How to implement ng2-ui (NPM package) using Angular CLI?
我希望将以下 NPM 包与 Angular CLI 一起使用:ng2-ui
实现指南是针对SystemJS的,不是针对Webpack的,Angular CLI用的是什么,我要用到的是这个项目.
我已经做了什么?
- 安装包
npm install ng2-ui --save
将以下行添加到 app.module.ts
import { Ng2UIModule } from 'ng2-ui';
- 已将
Ng2UIModule
添加到 @NgModule
中的 imports
数组。
到目前为止,我还没有在任何组件中使用 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)
感谢您的帮助!
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添加到导入数组。
我希望将以下 NPM 包与 Angular CLI 一起使用:ng2-ui
实现指南是针对SystemJS的,不是针对Webpack的,Angular CLI用的是什么,我要用到的是这个项目.
我已经做了什么?
- 安装包
npm install ng2-ui --save
将以下行添加到
app.module.ts
import { Ng2UIModule } from 'ng2-ui';
- 已将
Ng2UIModule
添加到@NgModule
中的imports
数组。
到目前为止,我还没有在任何组件中使用 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)
感谢您的帮助!
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添加到导入数组。