2017-12-04 11 views
1

私は独自のjavascriptライブラリをandular4-cliプロジェクトで実装したいと考えています。私自身のライブラリなので、ライブラリをnpmで含めることはできません。
tsconfig.json正しく独自のjavascriptライブラリを実装する方法、角4

{ 
    "extends": "../tsconfig.json", 
    "compilerOptions": { 
    "allowJs": true, 
    "outDir": "../out-tsc/app", 
    "module": "es2015", 
    "baseUrl": "", 
    "types": [] 
    }, 
    "exclude": [ 
    "test.ts", 
    "**/*.spec.ts" 
    ] 
} 

私は

"assets/myownlib.js" 

angular.cli.jsonに私は、ライブラリを使用するコンポーネントライブラリを実装:

import { Component, OnInit } from '@angular/core'; 
import {DataService} from './tempdatagia.service'; 
import {MyLib} from '../../assets/myownlib'; 



@Component({ 
    selector: 'app-paho', 
    templateUrl: './paho.component.html', 
    styleUrls: ['./paho.component.css'] 
}) 
export class PahoComponent { 
    // Create a client instance 
    client: any; 

    constructor(private tempdata: DataService) { 



    this.client = new MyLib.MQTT.Client('wpsdemo.gia.rwth-aachen.de', 8080, 'Steffen'); 

    this.onMessage(); 
    this.onConnectionLost(); 
    // connect the client 
    this.client.connect({onSuccess: this.onConnected.bind(this)}); 
    } 
. 
. 
. 
} 

をエラー 012 '../../assets/myownlib' からラインインポート{MYLIB} ;:



を "JSが設定されていない許可" "名前空間を見つけることができません" MYLIB"。

答えて

1

アンゴラ4のプロジェクトで自分のJavaScriptライブラリーを一般的にどのようにエクスポートするのか、私の質問に答えたいと思います。これはおそらく自分のJavaScriptライブラリを含む数百のソリューションのほんの一例ですが、私の意見ではこれは最も簡単で最速のものです。
一般的に、アンサンブル4でJavaScriptライブラリを使用する場合は、ほとんどyourlib.d.tsファイルが必要です。それなしでそれを行ういくつかの可能性がありますが、私のために何も動作していませんでした!
yourlib.d.tsファイルを作成して、JavaScriptで書かれたAPIについてのtypescriptタイプの情報を提供する必要があります。あなたは「.d.ts」ファイル内のJavaScriptライブラリから、すべての関数とメソッドを定義する必要があなたの「.d.ts」ファイルを作成するために

For more information about ".d.ts"

に。 手でそれらを検索し、 ".d.ts"ファイルで宣言してください。
あなたの宣言(鉱山からの抜粋)のように見えるべきである:

export declare namespace MyLib { 
    export namespace MQTT { 
     export class Client { 
      geosubscribe(topicfilter: string, temporalfilter: string, spatialfilter: string, spatialrelation: string, subscribeOptions: Object): void; 
      geounsubscribe(topicfilter: string, temporalfilter: string, spatialfilter: string, subscribeOptions: Object): void; 
      send(message: Message): void; 
      geosend(message: Message): void; 

    export class Message { 
      constructor(payload: any); 
      payloadString: string; 
      geometry: string; 
      timestamp: string; 
     } 
export class WireMessage { 
      encode(): ArrayBuffer; 
      decodeMessage(input: ArrayBuffer, pos: number): Array<any>; 
      writeUint16(input: number, buffer: ArrayBuffer, offset: number): number; 
      writeString(input: string, utf8Length: number, buffer: ArrayBuffer, offset: number): number; 
      readUint16(buffer: ArrayBuffer, offset: number): number; 
      encodeMBI(num: number): Array<any>; 

     } 
    } 
} 
0

あなたのlibコードを見てください。モジュールのように使用しましたか?

const someLib = function(){} 
module.exports = someLib; 

次に、角度cliのパスを見てください。私は "../assets ...."でなければならないと思う。

もしあなたがtypescriptでそれを使用しているのであれば、間違ったパスを書いたか、あなたのタイスクリプトコードが間違っていると思います。あなたのライブラリには何がありますか?

+0

「資産」または「../assets」は重要ではありませんが、違いはありません。私のlibは動作しています...ちょっとした変更を加えてすでにnpmを使って実装しているもう一つのライブラリです!私の質問は、どのように一般的に自分のjsライブラリを実装する方法が大嫌いです。パスは正しいです、パスについてはエラーがありません... – Steffn

+0

私のlibはpaho-mqttクライアントの修正です... – Steffn

+0

コンパイル済みの.jsファイルを.tsからインポートしようとしましたか? –

関連する問題