上回说到了如何利用npm包管理器发布自己的包，这次咱们就来个实践。

引言：三步走战略

1、写好自己的组件

2、利用npm发布自己的组件

3、使用包

一、写组件

//import区域
import { Component } from '@angular/core';
import { DataService } from 'itoo-module';
//angular2装饰器区域
@Component({
  selector: 'data-grid',templateUrl: './datagrod.component.html',styleUrls: ['./datagrid.component.css']

})

//类文件
export class DatagridCompoent implements OnInit{
      //组件的方法区，字段区
     

}

//依旧是import区域
import {DataGridComponent} from "./datagrid.component";
import {DataService} from "./dataservice";
......

//基于angular2的写法
@NgModule({
  declarations: [
    DataGridComponent  //把对外提供的组件全部加入declarations中
  ],//使用的module全部放到imports中
  imports: [
    BrowserModule,FormsModule,HttpModule,NgbModule.forRoot()
  ],providers:[DataService],//引用到的服务，再次实例化
  exports:[DataGridComponent]       //对外提供的组件，全部放到exports里

})

二、npm发布自己的组件

{
  "name": "itoo-module","version": "1.0.6","description": "module of itoo ","main": "index.js","scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },"keywords": [
    "itoo"
  ],"author": "ledary","license": "ISC"
}

export * from './lib/datagrid.module';   
export * from './lib/dataservice';

看上面发布的dataservice，其实是一个封装好的类，里面有访问后台数据的方法。对于打包发布的类，我们需要给类 d.ts文件，因为发布的包都是js，js中的对象的方法不会自动弹出，而且对于JS的方法在编程时不会提示错误，甚至运行的时候会破坏js里面各种变量的类型，造成运行时的错误。所以需要写d.ts文件。这样的话就完美解决了js方法不能自动提示的问题。

service.d.ts内容

import { Injectable,Input}    from '@angular/core';
import { Headers,Http,Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

export declare class DataService  {
  
  private Configuration:any;
   constructor(http: Http);
  
   
public getConfiguration():any;
private handleError(error: any): Promise<any>;
private getWebfig():void;
public getData(url:string):Promise<any>;
}

/**
 * Created by WGP on 2017/4/25.
 */
import { Injectable,Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export  class DataService {

 private   Configuration:any;
  // private headers = new Headers({'Content-Type': 'application/json'});
public getConfiguration(){
  return this.Configuration;
}
   constructor(private http:Http){
      this.getWebfig();
   }

   //调用远程地址，获取数据 get方法
   //返回response的json串
  public getData(url:string): Promise<any> {
      return this.http 
               .get(url)
               .toPromise()
               .then(response => response.json() as any )
               .catch(this.handleError);

  }
private  getWebfig(){
 
 this.http.get("src/mock-data/web-config.json")
            .map((res: Response) => res.json()).subscribe(data=>this.Configuration=data);
    
}

  
  //错误处理
    private handleError(error: any): Promise<any> {
    console.error('An error occurred',error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

首先利用npm包管理器，安装好自己的包。npm安装不成功的话，可以使用cnpm

cnpm install 包名

其次，把包引入项目内

引用包中的模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { NgbModule }  from '@ng-bootstrap/ng-bootstrap';
// import { DataGridModule } from './table/lib/datagrid.module';
import { DataGridModule } from 'itoo-module';

import { AppComponent } from './app.component';
import { HttpModule} from '@angular/http';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    BrowserModule,NgbModule,DataGridModule

  ],exports:[DataGridModule],bootstrap: [AppComponent]

})
export class AppModule { }

import { Component } from '@angular/core';
import { DataService } from 'itoo-module'; //引入包的服务

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']

})

export class AppComponent {
 
 constructor(private dataService:DataService){} //依赖注入服务
 test(){
   alert(this.dataService.getConfiguration()["port"]); 使用服务内的方法。
   
 }

  
}

这样的基于angular2的模块，服务的发布就完成了。

源码地址：https://github.com/ledary/demo

在发布的过程中遇到了不少的问题。参考angular2核心模块的包，逐渐知道了怎么发布angular2的包，其实也是基于node.js的发布。在中间着实遇到了不少问题，非常感谢众多帮助我的人啊。多交流，多进步。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!