簡體   English   中英

Angular2自定義npm軟件包

[英]Angular2 custom npm package

我想為在多個應用程序中使用的身份驗證服務編寫一個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創建自己的自定義插件以及如何正確注入它們?

問題是我模塊中的構造函數參數:

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ł所說):模塊必須放在提供者處,而不是導入處。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM