Question

我想在一个andular4-cli项目中实现我自己的javascript库。因为它是我自己的库，所以不可能用npm包含库。
的 tsconfig.json

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

我在 angular.cli.json

中实现了库

"assets/myownlib.js"

我想使用该库的组件：

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)});
  }
 .
 .
 .
}

错误
从'../../assets/myownlib'中直接导入{MyLib};：
“允许js未设置”

“找不到命名空间'MyLib'。”

Answer 1

我想回答我的问题，如何在角度4项目中一般导出自己的JavaScript lybrary。这可能只是包含他自己的JavaScript库的数百个解决方案，但在我看来，这是最容易和最快的通常，如果要在角度4中使用JavaScript库，则通常需要 yourlib.d.ts 文件。有一些可以做到没有的可能性，但对我来说没有人工作！
因此，您必须创建yourlib.d.ts文件以使用它来提供有关用JavaScript编写的API的打字稿类型信息。

For more information about ".d.ts"

要创建“.d.ts”文件，您必须在“.d.ts”文件中的JavaScript库中定义所有函数和方法。只需手动搜索它们并在“.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>;

        }
    }
}

Answer 2

查看您的lib代码。你是否像模块一样使用它？

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

接下来，查看角度cli中的路径。我认为它必须是＆＃34; ../ assets ....＆＃34;。

如果您使用打字稿，我认为您写错了路径或打字稿代码不正确。你的lib里有什么？

如何正确实现自己的javascript库，angular 4

2 个答案: