Angular не может разрешить путь к модулю пользовательского пакета NPM

Я разрабатываю пользовательскую библиотеку Angular 13 с использованием NPM V8.19.3, и она использует библиотеку Dynamsoft WebTwain v18.1.0 для управления сканером. Позже он должен использоваться локально — например, через ссылку NPM — приложением Angular в том же рабочем пространстве по причинам разработки, позже он будет опубликован в реестре NPM и станет доступным для «настоящих» приложений. Я начал новую рабочую область, потому что это просто «доказательство концепции», если она работает, будет сделана такая же работа на реальной.

Ниже я кратко изложу контекст и шаги, которые я выполнил.

  • создать пустую рабочую область
  • добавьте к нему два проекта, один типа библиотеки (poc-scan-package) и один типа приложения (poc-scan-showcase)
  • добавить в приложение свой package.json (чтобы зависимости не попадали в общий)
  • добавить библиотеку Dynamsoft WebTwain в качестве связанной зависимости моего пользовательского пакета (следуя этой ссылке в качестве начального руководства, но адаптированной для использования в пакете, а не в приложении) и
  • добавьте в общий package.json скрипт для сборки пакета и скопируйте необходимые ресурсы в собранный пакет, как указано в руководстве по началу работы.
  • создать глобальную ссылку на мой "dist/<package name>" папка с использованием ссылки npm и используйте эту ссылку в проекте приложения
  • добавить в angular.json "projects/<application name>/architect/build/options/assets" путь, по которому я скопировал ресурсы WebTwain
  • последним шагом было изменение html приложения для ссылки на компонент пакета и сам компонент пакета.

После этих шагов это соответствующие файлы/разделы:

Содержимое рабочей области

угловой.json
      {
    ...
    "projects": {
        ...
        "poc-scan-showcase": {
            "projectType": "application",
            "root": "projects/poc-scan-showcase",
            ...
            "architect": {
                "build": {
                    "options": {
                        ...
                        "assets": [
                            ...,
                            {
                                "glob": "**/*",
                                "input": "projects/poc-scan-showcase/node_modules/poc-scan-package/assets/dwt-resources/dist/",
                                "output": "assets/dwt-resources"
                            }
                        ]
                    }
                }
            }
        }
    }
}
package.json — команда сборки:
      "scripts": {
    "build:lib": "npm run build -- --project poc-scan-package && mkdir -p ./dist/poc-scan-package/assets/dwt-resources && cp ./projects/poc-scan-package/node_modules/dwt/dist ./dist/poc-scan-package/assets/dwt-resources -r"
}

Содержимое библиотеки

пакет.json
      {
    "name": "poc-scan-package",
    "version": "0.0.1",
    "peerDependencies": {
        "@angular/common": "^13.3.0",
        "@angular/core": "^13.3.0"
    },
    "dependencies": {
        "dwt": "^18.1.0",
        "tslib": "^2.3.0"
    },
    "bundledDependencies": [
        "dwt"
    ]
}
ng-package.json
      {
    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
    "dest": "../../dist/poc-scan-package",
    "lib": {
        "entryFile": "src/public-api.ts"
    },
    "allowedNonPeerDependencies": ["dwt"]
}
poc-scan-package.component.ts
      import { Component, OnInit } from "@angular/core";
import Dynamsoft from "dwt";
import { WebTwain }  from "dwt/dist/types/WebTwain";
@Component({
    selector: "lib-poc-scan-package",
    template: `
        <button (click)="acquireImage()">Acquire Images</button>
        <div id="dwtcontrolContainer"></div>
    `
})
export class PocScanPackageComponent implements OnInit {
    DWObject: WebTwain | any = null;
    ngOnInit(): void {
        .
        .
        .
        Dynamsoft.DWT.RegisterEvent("OnWebTwainReady", () => {
            this.Dynamsoft_OnReady();
        });
        Dynamsoft.DWT.ProductKey = "YOUR-PRODUCT-KEY";
        Dynamsoft.DWT.ResourcesPath = "assets/dwt-resources"; // <--expected path for setup delivery
        Dynamsoft.DWT.Load();
    }
    .
    .
    .
}

Содержание приложения

app.component.ts
      @Component({
selector: "poc-root",
    template: ` <lib-poc-scan-package></lib-poc-scan-package> `,
    styles: [],
})
export class AppComponent {
    title = "poc-scan-showcase";
}

Таким образом, обаDynamsoftобъект иWebTwainИнтерфейс, кажется, не найден во время выполнения. Это часть вывода сборки приложения:

      ./dist/poc-scan-package/fesm2015/poc-scan-package.mjs:3:0-28 - Error: Module not found: Error: Can't resolve 'dwt' in '`/home/<username>/repos/test/poc/EmbedScanIntoPackage/dist/poc-scan-package/fesm2015`'

Error: dist/poc-scan-package/lib/poc-scan-package.component.d.ts:2:26 - error TS2307: Cannot find module 'dwt/dist/types/WebTwain' or its corresponding type declarations.

`import { WebTwain } from "dwt/dist/types/WebTwain";`
                           ~~~~~~~~~~~~~~~~~~~~~~~~~

Я думаю, чтобы понять, что компилятор прав, потому что в собранной библиотеке ожидаемый каталог переназначен на "assets/dwt-resources/dist/types", но я не уверен, почему он должен искать там.

Я думаю отключить "dist" и заставить NPM указывать на проект исходной библиотеки, но каждый пример, который я когда-либо видел, указывает на него.

Вот ссылка на репо с работой, которую я сделал до сих пор.

Дайте мне знать, если мне не хватает полезной информации.

0 ответов

Другие вопросы по тегам