Question

我当前的设置

我已经创建并发布了一个npm包（以打字稿形式），该包内部引用了位于其中container文件夹中的几个字体文件。

然后我将这个软件包安装在Angular应用程序中。

安装软件包后ReactDOM.render(<App />, document.getElementById('root'));中的文件结构如下：

public/fonts

我将node_modules中的字体文件称为：

 node_modules/
   mypackage/
     dist/
       index.d.ts
       index.js
     public/
       fonts/
     LICENSE
     README.md
     package.json
     tsconfig.json

在开发程序包时没有抛出错误。

当前问题

但是现在在我安装，导入并在使用软件包时，它会引发以下错误：

错误：ENOENT：没有此类文件或目录，请打开“ public / fonts / Roboto-Bold.ttf”

观察

如果我将公用文件夹放在使用该软件包的应用程序的根目录下，它将按预期工作。这意味着程序包正在应用程序的根目录而不是程序包中的一级寻找index.js。

任何想法如何引用程序包中的那些文件，还应确保在开发程序包时不会引发错误。

此外，我的包裹'Roboto': { normal: 'public/fonts/Roboto-Regular.ttf', bold: 'public/fonts/Roboto-Bold.ttf', italics: 'public/fonts/Roboto-Italic.ttf', bolditalics: 'public/fonts/Roboto-BoldItalic.ttf' }也出现以下错误：

public/fonts/。

对于上述问题，在软件包的根目录中添加一个空白的.ts文件可以解决该问题，但是还有其他选择吗？

编辑（添加包裹的tsconfig.json）

[ts] No inputs were found in ...../mypackage/tsconfig.json. Specified 'include' paths were [**/*] and 'exclude' paths were [./dist]

Answer 1

在您的自述文件中，您可以指导用户将资产配置添加到angular json文件中，如Angular CLI stories asset configuration所述：

您可以使用此扩展配置从项目外部复制资产。例如，您可以从节点程序包中复制资产：

"assets": [
  { 
    "glob": "**/*", 
    "input": "./node_modules/some-package/images", 
    "output": "/some-package/" 
  }
]

因此，您的情况应该是：

"assets": [
  { 
    "glob": "**/*", 
    "input": "../node_modules/mypackage/public", 
    "output": "/public/" 
  }
]

node_modules的路径应相对于您的应用程序根目录。

从NG6开始，您可以使用Angular CLI中的ng add命令，该命令将安装您的npm模块并在angular json文件中进行所需的更新。您将需要在模块中为ng add实现原理图逻辑，您可以找到以下示例：Angular material，primeng schematics等...

NPM软件包：引用软件包中的资产

我当前的设置

当前问题

观察

1 个答案: