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

The Scrollable feature in Material2 cdk remains unutilized due to

Trying to implement the new APIs for listening to scroll events in Material2 has proven challenging. I followed the steps of importing the ScrollDispatchModule in my app.module.ts file and marking a container with the cdkScrollable directive: <div cdkS ...

Installing Node.js from local files is a straightforward process that allows users

After making changes to an npm package on my computer, I am looking to install the updated version globally along with its dependencies. What is the best way to achieve this? ...

Error: Unable to locate module @emotion/react/

While working on my MERN stack project, I faced an issue when proxying the frontend to backend on localhost. Everything was running smoothly until I stopped the react application to install some modules. Upon restarting with the npm start command, a series ...

Using React and TypeScript to pass member variables

My component Child has a member variable that can change dynamically. While I am aware of passing props and states, is there a more elegant solution than passing member variables through props or other parameters? class Child extends React.Component< ...

Can you guide me on incorporating a date input with ngModel?

I have a date input field set up as follows: <input [(ngModel)]="value" type="text" class="form-control"> Can someone explain how I can display and submit the value correctly? The user's input should be formatted as dd/MM/yyyy, while t ...

I'm experiencing an issue with redirect in Nextjs that's causing an error message to appear. The error reads: "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

I'm currently diving into the world of NextJS and working on creating a simple recipe application. Utilizing the new App Router has been smooth sailing for the most part, except for one hiccup with the login function. After successfully logging in (us ...

Creating robust unit tests for Node.js applications with the help of redis-mock

I am facing an issue while trying to establish a connection with redis and save the data in redis using the redis-mock library in node-typescript, resulting in my test failing. Below is the code snippet for the redis connection: let client: RedisClientTyp ...

Is there a way to retrieve just one specific field from a Firestore query instead of fetching all fields?

I am experiencing an issue where I can successfully output all fields in the console, but I only want to display one specific field. In this case, I am trying to retrieve the ID field but I am encountering difficulties. Below are screenshots illustrating m ...

What is the process in Typescript for importing JSON files and dynamically searching for values based on keys?

When working with typescript 3.0.3, I encountered an issue while importing a json file in the following manner: import postalCodes from '../PostalCodes.json'; The json file has the structure shown below: { "555": { "code": 555, "city": "Sc ...

Can optional properties or defaults have a specific type requirement defined for them?

When defining a type for a function's input, I want to designate certain properties as required and others as optional: type Input = { // Required: url: string, method: string, // Optional: timeoutMS?: number, maxRedirects?: number, } In ...

Ionic: Implementing a clear text field function when the ion-back-button is clicked

So I've created a feature where users can scan product barcodes using BarcodeScanner. Once the barcode is scanned, the product ID appears in a text field and is then sent to another page where an API call is made to display product details. On this pr ...

When attempting to install the cube using npm, an error message was encountered stating "No distribution

Running Ubuntu 14.04 and just installed nodejs, npm, and mongodb. Trying to install cube with npm install cube but encountering the following errors: npm ERR! Error: No dist in websocket-server package npm ERR! at next (/usr/share/npm/lib/cache.js:746 ...

Updating a value in an array in Angular using the same ID

I have an array of buildings that looks like this: const buildings = [ { id: 111, status: false, image: 'Test1' }, { id: 334, status: true, image: 'Test4' }, { id: 243, status: false, image: 'Test7' }, { id: 654, stat ...

Error TS2339: The code is trying to access a property 'f' that is not defined within the 'ReactiveComponent' type

I have recently started working with Angular and I encountered an issue while creating a reactive form. The form is supposed to display the submitted values in an array, but when I added validators to the password field, an error popped up. error TS2339: ...

Ways to assign a boolean value to HTML using Angular?

Can someone help me set the initial value of showProduct to false for the app-product HTML selector? showProduct:boolean = false; <button (click)="showProduct=!showProduct">Show Product</button> <div *ngIf="!showProduct"> <app-p ...

Adding a fresh element to an object array in TypeScript

How can we add a specific value to an array of objects using TypeScript? I am looking to insert the value 1993 into each "annualRentCurrent" property in the sample object. Any suggestions on how to achieve this in TypeScript or Angular? Thank you! #Data ...

Can Angular Universal cater to dynamic content needs?

I am considering using Angular Universal for SEO optimization and social media preview purposes. While I understand that it works well with static content, my concern lies with how it handles dynamic content. Specifically, I want search engines and social ...

Struggling to properly interpret and process the latest data being sent from an Angular single page application (SPA

Currently, I am developing a Single Page Application that utilizes Angular 8 on the frontend and Laravel on the backend. The application involves performing CRUD operations, and specifically when dealing with editing functionality, I encounter an issue. Th ...

"Initiate React app with specific port number using the Command Line Interface

I'm trying to launch my react server on Linux CLI with a specific port number without modifying the package.json script. I want the ability to run multiple react instances on different ports via CLI. I've come across suggestions like npm start ...

Authentication for file uploads in Angular 2 using Dropzone and passportjs

I am currently working on implementing authentication for an admin user using Express, Passport, and MySQL in a specific page. The authentication process works fine, but I am facing an issue with verifying whether the user is logged in while uploading file ...