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 указывать на проект исходной библиотеки, но каждый пример, который я когда-либо видел, указывает на него.
Вот ссылка на репо с работой, которую я сделал до сих пор.
Дайте мне знать, если мне не хватает полезной информации.