NPM Package : Referring to assets within the package

Question

My Current Setup

I have created & published an npm package(in typescript) which internally refers to few font files residing in a public/fonts folder within it.

I'm then installing this package in an Angular application.

The file structure within node_modules after the package is installed is as follows:

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

I am referring to the font file from index.js as:

'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'
}

The above didn't throw an error while developing the package.

Current Issue

But now after I installed, imported and while using the package it throws the following error:

Error: ENOENT: no such file or directory, open 'public/fonts/Roboto-Bold.ttf'

Observation

If I place the public folder at the root of the application which is using the package, it works as expected. Which means the package is looking for public/fonts/ at the root level of the application rather than the one within the package.

Any idea how to refer to those files within the package also making sure it doesn't throw an error while developing the package.

Additionally I also get the below error at my package's tsconfig.json:

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

For the above issue, adding a blank .ts file at the root of the package fixes it but is there any alternative ?

Edit (adding my package's tsconfig.json)

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "noImplicitAny": false,
    "lib": [
      "es2015"
    ]
  }
}

Trademark

Answer 1

At your read me file you can guide users to add assets configuration to angular json file as explained at Angular CLI stories asset configuration:

You can use this extended configuration to copy assets from outside your project. For instance, you can copy assets from a node package:

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

so, in your case it should be:

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

path to node_modules should be relative to your app root.

Starting from NG6, you can use ng add command from Angular CLI which will install your npm module and make needed update at angular json file. You will need to implement schematics logic for ng add in your module, you can find examples like: Angular material, primeng schematics, etc...

Extra

Thank you. Would this mean I then have to edit the relative path at the package's index.js to normal: 'dist/public/fonts/Roboto-Regular.ttf' ? – Trademark

I would be really thankful if you could help me with another issue in the same lines at the package's tsconfig.json. The file is complaining for [ts] No inputs were found in ...../mypackage/tsconfig.json. Specified 'include' paths were [**/*] and 'exclude' paths were [./dist]. I have updated the question showing current package tsconfig.json. – Trademark

For the above issue, adding a blank .ts file at the root of the package fixes it but is there any alternative ? – Trademark

The original question was about getting package's resources after installing and importing your package. The only needed step I proposed was to modify your angular app's .angular-cli.json file. Did it solve your issue? About another issues you can learn from another angular libs, for example ngx-leaflet (github.com/Asymmetrik/ngx-leaflet) or explore ng6 library schematics (github.com/angular/angular-cli/tree/master/packages/schematics/…). If you still need help, please commit your entire code to GIT and I will try to help – Extra

Yes it solved my issue with a small change though, the input had to be ../node_modules/mypackage/public and not ./node_modules/mypackage/public. If you could make that change, I will accept your answer. Cheers. Also my entire code can be found here – Trademark

Answer 2

If you're getting the error '[ts] No inputs were found in ...../mypackage/tsconfig.json. Specified 'include' paths were [**/*] and 'exclude' paths were [./dist]', check your project file structure. I had this error, and I realized that I had accidentally nested the dist file I wanted to use for my outDir (specified in my ts.config) into my src file. I simply made sure the files were in the right places in my project's file structure, and the issue was resolved.

Groomsman