Bad打包库-Angular自定义库-NPM

问题描述 投票:0回答:1

我正在学习将一个简单的Angular库发布到NPM。我遵循了许多不同的教程(例如hereherehere),并将软件包打包在NPM上。但是,当我尝试在测试项目中使用它时,它总是会引发错误。

我做什么

TL; DR:您可以从githubnpm中找到我要尝试的内容。

  1. 我按照他们的文档中所述创建了新的角度项目:
ng new angularx-wrapper-workspace --create-application=false
cd angularx-wrapper-workspace
ng generate library angularx-wrapper

我的文件夹结构如下:

enter image description here

  1. 我简单地开发了库,这些是核心文件:
//public-api.ts
export * from './lib/angularx-wrapper.module';
export * from './lib/angularx-wrapper.component';
//angularx-wrapper.module.ts
import { NgModule } from '@angular/core';
import { AngularXWrapperComponent } from './angularx-wrapper.component';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [AngularXWrapperComponent],
  imports: [
      CommonModule
  ],
  exports: [AngularXWrapperComponent]
})
export class AngularXWrapperModule { }

(该错误似乎与npm打包过程有关,因此我将省略无关的详细信息)

  1. 我建立了要发布的库:
ng build angularx-wrapper --prod
  1. 我发布图书馆:
npm publish

该库已成功发布。但是,当我创建一个新的测试应用程序以查看它是否有效时(test应用程序完全不同,不在库文件夹中):

ng new test
cd test
npm install angularx-wrapper

问题

发生了两件事。第一件事是我无法将库导入到我的测试应用程序:

enter image description here

导入它的唯一方法是执行此操作:

enter image description here

即使成功将库导入到我的测试应用程序后,运行它也会产生此错误:

ERROR in ./node_modules/angularx-wrapper/src/lib/angularx-wrapper.component.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /code/user/test/node_modules/angularx-wrapper/src/lib/angularx-wrapper.component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format.
    at AngularCompilerPlugin.getCompiledFile (/code/user/code/user/test/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:933:23)
    at /code/afunworm/code/user/test/node_modules/@ngtools/webpack/src/loader.js:41:31
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
ERROR in ./node_modules/angularx-wrapper/src/lib/angularx-wrapper.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /code/user/code/user/test/node_modules/angularx-wrapper/src/lib/angularx-wrapper.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format.
    at AngularCompilerPlugin.getCompiledFile (/code/user/code/user/test/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:933:23)
    at /code/user/code/user/test/node_modules/@ngtools/webpack/src/loader.js:41:31
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

我做错了哪一步?是我图书馆的文件夹结构引起了问题吗?我似乎找不到任何有关解决此问题的资源。

angular typescript npm angular-library
1个回答
0
投票

我发现了问题。问题是您必须从npm publish文件夹而不是库文件夹本身运行dist。这是一个愚蠢的错误,但是没有专门针对该错误的文档,因此我认为我将在此处保留答案。

© www.soinside.com 2019 - 2024. All rights reserved.