我希望在Angular CLI中使用以下NPM包：
ng2-ui
SystemJS的实现指南,而不是Webpack,Angular CLI使用的是什么,我必须在这个项目中使用.
我做了什么？
>通过npm install ng2-ui –save安装包
>在app.module.ts中添加了以下行
import { Ng2UIModule } from 'ng2-ui';
>将Ng2UIModule添加到@NgModule中的imports数组中.
到目前为止,我还没有在任何组件中使用Ng2UIModule,在进行上述操作之前,应用程序工作正常.
当我尝试通过ng服务运行应用程序时,我在控制台中收到以下错误：
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)
谢谢你的帮助！
解决方法
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');
}
}
从’@ngui / overlay’添加import {NguiOverlayModule};到模块并将NguiOverlayModule添加到imports数组.
