Unable to bring in a personalized npm package using its package title

Currently, I am loosely following a tutorial on creating an angular npm package named customlib. This package is intended for managing dependencies across my projects without the need to make them public on npm. The tutorial can be found here.

However, I encounter a 'module not found: Can't resolve 'customlib'' error in my app.module.ts file when trying to import it using:

import { customModule } from 'customlib';

In order to successfully import, I have to use the following path:

import { customModule } from '../../node_modules/customModule/dist-lib/index';

I'm wondering if there's something missing in my setup or configuration. It's important to note that all the files I want to include in my package are moved to the dist-lib directory.

The package.json of my library looks like this:

{
    "name" : "customlib",
    "version" : "0.1.0",
    "private" : true,
    "dependencies" : [
       ...
    ],
    "files" : [ "dist-lib/" ],
    "repository" : {
       "type" : "git",
       "url : "path/to/repo"
    },
    "types": "dist-lib/index.d.ts"
}

To add the dependency in the consumer project's package.json, I use the following format:

"customlib" : "path/to/repo"

Additionally, I've made sure to include the necessary paths in the consumer project's tsconfig.json:

"include": [
    "src/**/*.ts",
    "node_modules/customlib/dist-lib/index.ts"
]

Answer №1

Experiment with the dependencies in the consumer package.json:

"customlib" : "file:path/to/repo"

Remember to run "npm install" afterwards.

Answer №2

I came across a fantastic resource created by the angular team that discusses how to develop an angular package. This document includes various examples and packaging libraries that can be useful.

I recommend taking a look at this document for more information. I hope you find it helpful.

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

Comparing the properties of objects in two arrays can be done most effectively by utilizing the most efficient method available

In Angular2, I am looking for a more efficient way to check if an object's property in one array matches a property in another array and return the value. Is there a method similar to using .contains in Swift? doSomething(){ for (let element1 of ...

ngFor directive not iterating properly without any errors being displayed in the console

I reviewed numerous inquiries about issues with "ngFor not functioning properly". Here are the specifics. app.modules.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; impo ...

Issues with Angular 8 arise when attempting to use JavaScript after pressing the back button in the browser

While working on my Angular 8 project, everything runs smoothly until I hit the browser's back button. Once I do this, my external JavaScript stops functioning. I have tried using JavaScript in various ways, such as importing, requiring, and putting ...

The breakpoint was overlooked due to the absence of generated code for TypeScript on a Windows operating system

Currently, I am in the process of debugging a TypeScript project. The structure of the project folder and tsconfig.json file is illustrated below: Furthermore, my launch.json file is displayed below: While attempting to debug, I have noticed that .map fi ...

Utilizing a custom function declared within the component to handle changes in Angular's ngOnChanges

Although it may seem like a simple question, I'm struggling to find a solution. Here's the issue at hand: In my Angular Component, there's a function that I need help with. export class RolesListComponent implements OnInit, OnChanges { ...

What is the method for incorporating sorting into a mat-list?

I've searched for various solutions, but none seem to work with mat-list. It's crucial for me because mat-list is the only solution where drag&drop functionality works (I always face this issue with mat-table in tables and I can't find a ...

What specific event do I require for the onChange event in React using TypeScript?

I'm facing a problem while working with React TypeScript. I need to type the onChange event for a select element, but the data is coming from event.value instead of event.target.value. What should be the appropriate event to use in this case? Below i ...

Can you explain how to incorporate global functions from a javascript library into an Angular 2 project?

Recently I started working with angular-cli and came across a situation where I have an index.html containing a javascript script with some global functions. I want to access these functions in multiple parts of my application. As someone who is new to A ...

Encountering Webpack issues following the transition to Next 13

Since updating Next to version 13, we've encountered issues with our application not building properly. It appears that webpack is having trouble with imports, exports, and potentially typescript. ../../libs/queries/src/lib/groq/searchFaq.ts Module pa ...

Installing libraries using npm can be done in two ways: using the command `npm install`

While working, we encountered an issue where the icon for the menu block from the rc-menu library was not displaying. Every time we run mvn install We also run npm install In our package.json file, we had included this library "rc-menu":"^5.1 ...

What prevents me from extending an Express Request Type?

My current code looks like this: import { Request, Response, NextFunction } from 'express'; interface IUserRequest extends Request { user: User; } async use(req: IUserRequest, res: Response, next: NextFunction) { const apiKey: string = ...

Once the submit button is clicked in Angular Dev Extreme, validation processes are triggered once more

Currently experiencing an issue on a page with textboxes and validations. After entering values into the textboxes and clicking submit, the values successfully pass to the database, but the validations continue to appear again upon submitting. This problem ...

Error: Unable to locate module '@material/core/Grid'

After cloning a repository that is built with MUI, I noticed that certain components were already imported and working seamlessly. These components include: import Card from '@mui/material/Card' import CardActions from '@mui/material/CardAct ...

Refreshing Form in Angular 2

When I remove a form control from my form, it causes the form to always be invalid. However, if I delete a character from another input field and then add the same character back in (to trigger a change event), the form becomes valid as expected. Is ther ...

Improving the management of user input in Lit components

I am seeking a more efficient method to manage all inputs within my lit component while minimizing the code usage. I am also employing Typescript in this process, utilizing @change=${this.handleInput} for all input fields. Below is an example of how the ha ...

Steps to modernize a legacy React project with the integration of a new Node module

Looking to integrate a new npm package that utilizes hooks and providers into my project based on pre-hook React (16.4.x). Debating whether it's best to upgrade directly to version 16.8.0 for hooks support or go with the latest version available. As f ...

Using TypeScript to asynchronously combine multiple Promises with the await keyword

In my code, I have a variable that combines multiple promises using async/await and concatenates them into a single object const traversals = (await traverseSchemas({filename:"my-validation-schema.json"}).concat([ _.zipObject( [&quo ...

Encountering an issue with Apostrophe CMS version 2.65.0 when trying to launch the project

I am currently in the process of upgrading from version 2.62.0 to 2.65.0 for Apostrophe. As part of this upgrade, I have integrated the mongo driver-3 into my settings. However, I am encountering an error while running the project: (node:116248) Warning ...

The function Event.target.value is coming back as null

I've been working on creating a timer window, and I've set up a separate component for it. However, I'm facing an issue with passing the time from the main component to the child component. The problem lies in the fact that the state of the ...

What is the reason for the delay in updates to the newest versions on the npm remote repository?

We are currently using an NPM repository set up in JFrog. Our concern is why the most recent versions, such as react 18.6.4, have not been updated in the npm remote repository yet. Our understanding is that this latest version was released 14 days ago. ...