NPM Package: Accessing resources from within the package

My Current Setup

I have recently developed and published an npm package in typescript. This package contains references to font files located within a folder named public/fonts internally.

Now, I am in the process of installing this package into an Angular application.

Upon installation, the file structure within the node_modules directory looks like this:

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

In the index.js file, I reference the font files as follows:

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

Initially, during the package development stage, there were no errors reported.

Current Issue

However, after successfully installing and importing the package into my application, I encountered the following error while using it:

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

Observation

I noticed that if I place the public folder at the root level of the application utilizing the package, everything works as expected. It seems that the package is searching for public/fonts/ at the application's root level rather than within the package itself.

Do you have any suggestions on how to reference these files from within the package without encountering errors during development?

Additionally, I also encountered another error related to my package's tsconfig.json:

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

To resolve this issue, I had to add a blank .ts file at the root of the package. Is there a better alternative solution available?

Edit (including my package's tsconfig.json)

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

Answer №1

When creating your read me file, be sure to instruct users on how to add asset configurations to the angular json file as outlined in Angular CLI's stories asset configuration:

This extended configuration allows you to copy assets from outside your project. For example, you can copy assets from a node package:

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

In your specific case, it would look like this:

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

The path to node_modules should be relative to your app root.

With NG6 onwards, you can utilize the ng add command from Angular CLI to install npm modules and update the angular json file accordingly. You will need to implement schematics logic for ng add in your module; examples can be found at: Angular material, primeng schematics, etc...

Answer №2

If you encounter the message '[ts] No inputs were found in ...../mypackage/tsconfig.json. Specified 'include' paths were [**/*] and 'exclude' paths were [./dist]', it's important to review your project file layout. I once faced this issue myself when I mistakenly placed the dist directory intended for outDir (as specified in my ts.config) within the src directory. After correcting the placement of the files in my project structure, the problem was successfully resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to dynamically inject HTML content from a child component into a different component using Angular 5

Is it possible to customize the content of a reusable header section based on the current route data in Angular? The header currently displays a title and description pulled from the route data property. My concern is how to dynamically inject different H ...

htmlangulartypescriptangular-components

Having trouble with setting up local notifications in React Native's scheduling feature?

I have integrated the react-native-push-notifications npm library into my application to enable notifications. However, I am facing an issue while trying to schedule notifications using PushNotification.localNotificationSchedule. The code snippet for this ...

javascriptreact-nativenpmpush-notificationreact-native-push-notification

A step-by-step guide to activating multi-selection in the Primary SideBar of Visual Studio Code using your custom extension

Currently, I'm in the process of developing an extension for Visual Studio Code where I've added a new activityBar containing treeViews that showcase information pulled from a JSON file. My goal is to enable users to multi-select certain displaye ...

javascripttypescriptvisual-studio-codevscode-extensions

Install the latest version of a package and save it to the dependencies in the package.json file with

I need to npm i --save and save the package installed as "*" (always staying current). I've attempted: npm i --save something@latest npm i --save something@* But I'm at a loss for what else to try... ...

node.jsnpmnpm-install

The parameter type '==="' cannot be assigned to the 'WhereFilterOp' type in this argument

I'm currently working on creating a where clause for a firebase collection reference: this.allItineraries = firebase .firestore() .collection(`itinerary`); Here is the issue with the where clause: return this.allItiner ...

angulartypescriptfirebasegoogle-cloud-firestoreionic4

Modify associated dropdown menus

I am trying to create an edit form that includes dependent select fields (such as country, state, city). The issue I am facing is that the edit only works when I reselect the first option (car brand) because I am using the event (change) with $event. How c ...

angulartypescriptformsselect

The issue with Angular 2's Ng style is that it does not properly remove the old style when there is a change

I am currently experiencing an issue within my project. When assigning an object to ngStyle in a div, the problem arises where ngStyle does not clear the style properties from the previous object when there is a change in the object. It should ideally rem ...

angular

Using ExpressJS with the GET method to retrieve JSON data in conjunction with Angular version 4 and above

This inquiry may be a duplicate, I apologize for any repetition. My objective is to console.log JSON data from the "Server" folder. Please find the attached folder structure below. https://i.stack.imgur.com/uec4O.png server.js const express = require(&a ...

node.jsangularexpressget

Typescript error in RxJS: Incorrect argument type used

I came across this code snippet from an example in rxjs: Observable.fromEvent(this.getNativeElement(this.right), 'click') .map(event => 10) .startWith({x: 400, y: 400}) .scan((acc, curr) => Object.assign({}, acc, {x: acc ...

typescriptrxjsrxjs5

Do you think it's wise to utilize React.Context for injecting UI components?

I have a plan to create my own specialized react component library. These components will mainly focus on implementing specific logic rather than being full-fledged UI components. One key requirement is that users should have the flexibility to define a se ...

javascriptreactjstypescriptdependency-injection

Encountering the error message "The argument type 'AsyncThunkAction<*>' cannot be assigned to the parameter type 'Action<any>'" while trying to utilize a custom typed useAppDispatch hook

For a live example, you can check out this link. In the process of developing a React application with TypeScript and Redux Toolkit, I have meticulously followed the guidelines outlined in the documentation. As a result, I have successfully implemented ty ...

reactjstypescriptreduxredux-toolkit

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

I am experimenting with using NestJS as a custom server for NextJS, following the instructions in this article. Here is a simplified version of the code: @Controller('/') export class ViewController { @Get('*') async static(@Req() r ...

javascriptreactjstypescriptnext.jsnestjs

The GraphQl Code Generator fails to correctly generate the graphql() function in Next.js applications

While working on my next.js project, I integrated GraphQL to generate types for queries. However, the code generator is not functioning properly and displaying an error message: "The query argument is unknown! Please regenerate the types." within the gql.t ...

reactjstypescriptnext.jsgraphqlgraphql-codegen

What is the best way to utilize the typescript module for detecting and managing typescript errors and warnings in your code?

Currently, I am experimenting with the typescript module to programmatically detect typescript errors. Below is a simplified version of what I have been working on: var ts=require('typescript') var file_content=` interface Message{ a:string ...

typescript

Missing expected property in TypeScript casting operation

I recently came across this intriguing playground example outlining a scenario where I attempted to convert an object literal into an object with specific properties, but encountered unexpected results. class X { y: string; get hi(): string { ...

typescript

Keep displaying the default angular loading screen until the angular2 router is fully resolved

Angular2 CLI has a default loading screen that displays until the app gets bootstrapped with <app-root>Loading...</app-root>. Once this is done, the Angular2 route resolver makes an API call to verify whether the user is authenticated before n ...

angularangular2-routing

Should I use a separate webpack configuration for server-side rendering in React npm package?

I am the developer of a small npm package and I am currently facing challenges while trying to implement it in a Gatsby site. Despite my efforts, I am struggling to ensure that my npm package is ssr safe due to my limited knowledge of webpack. When attemp ...

reactjsnpmwebpackgatsbyserver-side-rendering

In Laravel blade, Vue components are not being loaded properly

I attempted to incorporate Vue.js into my Laravel project, but I encountered an issue. Despite following all the steps correctly, the Vue Components are not displaying in my php blade file. Below is the code for app.js: /** * First we will load all of th ...

phplaravelvue.jsnpmnpm-install

I want to know the most effective way to showcase particular information on a separate page using Angular

Recently, I've been working with a mock json file that contains a list of products to be displayed on a Product page. My goal is to select a specific product, such as 'Product 1', and have only that product's information displayed on th ...

jsonangulartypescript

Tips for addressing the ESLint issue stating that the package should be included in dependencies instead of devDependencies

Struggling to properly lint my React+Typescript project with ESLint. In one of my components, I'm utilizing the useParams hook from react-router. import { useParams } from 'react-router'; However, ESLint is throwing an error on that line: E ...

reactjstypescripteslint