CODEWITHSUNDEEP
angulartypescriptnpmrelative-path
Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

NPM Package : Referring to assets within the package

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"
    ]
  }
}

Upvotes: 8

Views: 12405

Answers (2)

user19917425
user19917425

Reputation: 1

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.

Upvotes: 0

Andriy
Andriy

Reputation: 15442

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...

Upvotes: 6

Related Questions