The ng-packagr Angular library fails to update tsconfig paths with relative paths

Question

The ng-packagr Angular library fails to update tsconfig paths with relative paths

In my Angular workspace (v10.0.2), I have a library and an app (used for testing the library).

Within the

projects/libname/src/lib/tsconfig.lib.json

file, I have defined some paths:

"baseUrl": "./src",
"paths": {
  "@lib/*": ["lib/*"]
}

And I am importing it like this:

import { DateUtils } from '@lib/utils/date.utils';

However, I am receiving a warning:

WARNING: No name was provided for external module '@lib/utils/date.utils' in output.globals – guessing 'date_utils'

It seems that the tsconfig paths are not being replaced, causing ng-packagr to treat it as an external module. Upon checking the dist folder, I noticed that '@lib/utils/date.utils' is still present and has not been replaced with the relative path. Ignoring the warning leads to an error when serving the test app:

Cannot find module '@lib/utils/date' or its corresponding type declarations.

I have extensively searched for solutions, but have not found any yet.

angular typescript ng-packagr

Answer 1

Answer №1

The most effective solution I discovered is to select a prefix that ensures your paths align perfectly once the package is installed in the node_modules directory.

For instance, if your package is named xyz, your tsconfig should look like this:

"paths": {
  "xyz/*": ["lib/*"]
}

I strongly recommend utilizing sub-entries as it not only resolves this issue, but also supports tree shaking. Check out this article for more insights.

Answer 2

The most effective solution I discovered is to select a prefix that ensures your paths align perfectly once the package is installed in the node_modules directory.

For instance, if your package is named xyz, your tsconfig should look like this:

"paths": {
  "xyz/*": ["lib/*"]
}

I strongly recommend utilizing sub-entries as it not only resolves this issue, but also supports tree shaking. Check out this article for more insights.

The ng-packagr Angular library fails to update tsconfig paths with relative paths

Answer №1

Similar questions

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

Using Express to serve both the Angular application and its API

To handle async actions in Typescript with React and Redux, ensure that all actions passed to axios are plain objects. If you need to perform

Angular Universal involves making two HTTP calls

The HttpClient.get('/') request with {observe: 'response'} is failing to retrieve some headers

Is there a suitable alternative that supports TypeScript, particularly with Angular 6, as D3Js does not directly support TypeScript?

Tips for utilizing string interpolation in the style tag of an Angular component

The lack of space within the <mat-select> component is causing some issues. Is there a way to incorporate multiple lines within the <

Create type definitions for React components in JavaScript that utilize the `prop-types` library

What causes the form to consistently show as invalid once it has been submitted?

Make Angular able to open a new window using window.open instead of opening a popup

Searching through an array of objects with ng2-completer does not yield any search results

Activate the onclick event for HTML select-options when there is only a single option available

Ways to resolve the issue of the 'setConfirmDelete' property not being found on type 'JSX.IntrinsicElements' in React.js

Deactivate the selection option in Syncfusion NumericTextbox

Issue arises when TypeScript attempts to verify the presence of an array element

Establish a Svelte and TypeScript "observe" script for developing vscode extensions

Trouble with launching Jasmine tests within define block in compiled Typescript

Determining the total number of items in an array in Angular efficiently without causing any lag

Angular 6: Unable to resolve parameters for Component: (?)