Angular2自定义npm包

时间:2016-11-16 14:30:27

标签: angular npm

我想为我在多个应用中使用的身份验证服务编写一个npm模块。 我看了看其他套餐,但不能'找到一个很大的不同。

我的模块部分::

我的Package.json:

{
 "name": "myApi-services",
 "version": "1.0.0-11",
 "main": "index.js",    //referring to the compiled js file from index.ts
 "dependencies": {
 "@angular/common": "2.1.0",
 "@angular/core": "^2.1.0",
 "@angular/http": "^2.1.0",
 "@angular/platform-browser": "^2.1.0",
 "angular2-jwt": "^0.1.25",
 "rxjs": "5.0.0-beta.12",
 "zone.js": "^0.6.21"
 }
}

我的Index.ts

export { MyAuthService} from "./authenticate"

我的身份验证课程

import { Http, Headers } from '@angular/http';
import { Config } from './config'

export class Authenticate {

constructor(private http:Http, private authUrl:string) {
    this.authUrl = Config.authUrl;
}

public login(username:string, password:string): void {
    let headers = new Headers();
    headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
    headers.append('Accept', 'application/json');
    this.http.post(this.authUrl, {}, { headers: headers })
        .subscribe(
            response => {
                this.storeToken(response.json().token);
            },
            err => console.log(err),
            () => console.log('Request Complete')
        );
}

private storeToken(token: string):void{
    localStorage.setItem('apiservices_token', token);
    console.log(localStorage.getItem('apiservices_token'))
}
}

我的导入部分::

的package.json

"depenencies":{
  "MyApi-services": "file:/// .... "
}

导入工作,模块导入到node_modules文件夹

app.module.ts

import { Authenticate } from 'myApi-services'
@NgModule({
  imports:[ Authenticate ]
})

app.component.ts

import { Authenticate } from 'myApi-services'

...

constructor(private auth: Authenticate){}

private login():void{
   auth.login('me', '12345');
}

....

浏览器抛出的一个错误:

Uncaught Error: Unexpected value 'Authenticate' declared by the module 'AppModule'

此错误是由于模拟该模块引起的。将其声明为提供商也不起作用。错误是一样的。

有没有人知道如何为angular2创建自己的自定义插件以及如何正确地注入它们?

1 个答案:

答案 0 :(得分:0)

问题是我的模块中的构造函数参数:

constructor(
     private http:Http, 
     private authUrl:string) {
   this.authUrl = Config.authUrl;

}

正如我在课堂上直接宣布的那样,该模块有效:

export class Authenticate {
      http: Http;
      authUrl:strin;

      constructor(){
          console.log("constructor without params");
      }
 }

angular2 npm模块似乎不喜欢构造函数中的params。

Furter(正如Michał所说):模块必须放在提供者处,而不是放在进口处。