Create an Angular library that incorporates a TypeScript dependency into the compilation process

Within my Angular lib, residing in an Nx workspace...

The lib relies on another local lib for shared TypeScript code.

The path to the shared lib is set in the tsconfig paths configuration:

"paths": {
    "@myOrg/sharedLib": ["libs/shared/src/index.ts"],
}

Code from the shared lib is imported using TypeScript imports like this:

import {someUtilFn} from '@myOrg/sharedLib'

The issue at hand is: How do I ensure that the code from the shared lib is included in the compiled Angular library? Currently, the built Angular library only includes its own code and excludes external dependencies. This means whoever uses the Angular lib (e.g. by npm installation) will need to also install the shared lib separately.

Given that the Angular lib will be distributed via npm... one option is to publish the shared lib as well and specify it as a dependency / peer dependency of the Angular library. However, I want to prevent users of the Angular lib from directly importing code from the shared lib.

Answer №1

revised response

The issue at hand is related to application dependencies being flattened, while libraries do not undergo the same process. More information on this topic can be found here, however it appears that the nx team has not addressed this concern.

One possible solution is to publish the common library to npm and include it as a regular dependency in your package.json file, rather than as a peer dependency. By doing so, users who download or update the main library will automatically receive the additional one as well.

The key distinction between a peer dependency and a regular dependency lies in the fact that a peer dependency is utilized by both end-users and your library, whereas a regular dependency is only needed for internal purposes and will not be directly used by the end-user.

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

Issues with the 'GET' request functionality on the deployed Angular project

I am attempting to run an Angular project that I have built. After copying the folder generated from 'ng build' and placing it in the directory where my back end code (using express) is located, I am trying to run it on my laptop at port 3000. Wh ...

Exploring the best practices for utilizing the error prop and CSS with the Input API in Material UI while utilizing context

When working with the MUI Input API props and CSS, I encountered an issue related to the {error} and its use. This is how my code looks: const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState< ...

incorrect implementation of react lifecycle phases

My Sharepoint Framework webpart includes a property side bar where I can choose a Sharepoint List, and it will display the list items from that list in an Office UI DetailsList Component. Although all REST calls are functioning properly during debugging, ...

Issue encountered in Angular app-routing module.ts: Type error TS2322: The type '"enabled"' cannot be assigned to type 'InitialNavigation | undefined'

When I recently updated my project from Angular 11 to 14, I encountered the following error when running "ng serve". Error: src/app/app-routing.module.ts:107:7 - error TS2322: Type '"enabled"' is not assignable to type 'InitialNavigation | u ...

The issue arises when trying to use data provided by a service, resulting in an "undefined

Looking to create a handler that generates an array of categories based on the presence of "categories" for a specific "resource". However, encountering an error with the last method. ERROR TypeError: "this.allProjectResources is undefined" import { Res ...

The specified type 'MutableRefObject<HTMLInputElement | undefined>' cannot be assigned to type 'LegacyRef<HTMLInputElement> | undefined'

Consider the following simplified component : const InputElement => React.forwardRef((props:any, ref) => { const handleRef = React.useRef<HTMLInputElement|undefined>() React.useImperativeHandle(ref, () => ({ setChecked(checke ...

Error encountered: ExpressionChangedAfterItHasBeenCheckedError when trying to load the loading indicator

I encountered an issue with my loading indicator that I cannot seem to resolve: LoadingIndicatorComponent.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'hidden: true&ap ...

Developing a node module that includes nested subfolders

I'm currently working on an npm module and have the following index.ts file: export * from './src/A/index'; Right now, when importing in my app, it looks like this: import {something} from 'myModule'; Now, I want to enhance my ...

When using NextJS <Link, mobile users may need to tap twice to navigate

Whenever I use the NextJS <Link tag on my mobile device, I notice that I have to double-tap for the link to actually route to the desired page. Take a look at the code snippet below: <Link href="/methodology" passHref={true} ...

Adjusting the panel dimensions based on the screen size

One feature on my website is a sliding panel (Image 1) located on the right side. It appears and disappears when a button is clicked, covering the entire height of the screen.https://i.sstatic.net/dF5Zc.jpg Here's the CSS code for this sliding panel- ...

Jest tests are failing to render React IonDateTime component

While executing Jest on an Ionic React component, I encountered a test failure consistently, regardless of whether the component had a time value or not. test('IonDateTime display', () => { render(<IonDatetime data-testid="foo" ...

Toggle the Visibility of your Password

I am currently working on implementing a TypeScript function in my webpage to enable the toggling of password visibility using an icon. The desired functionality is as follows: when a button (in this case, a clickable icon) is pressed, the icon should chan ...

What is the best way to make sure the embedded object fills the entire height of the container div?

I am currently using angular2/4 along with angular-material (https://material.angular.io/). My challenge lies in trying to embed a PDF within it. The issue I am facing is that the height of the PDF object seems to be small and doesn't fully occupy the ...

Utilizing moment.js in conjunction with typescript and the module setting of "amd"

Attempting to utilize moment.js with TypeScript 2.1.5 has been a bit of a challenge for me. I went ahead and installed moment using npm : npm install moment --save-dev The d.ts file is already included with moment.js, so no need to install via @typings ...

Tips on resolving handlebars 'module not found' error in typescript while compiling to umd

In my client-side JavaScript library written in TypeScript, I am attempting to incorporate Handlebars. However, when I try to import using import * as Handlebars from 'handlebars', I encounter an error message stating that TypeScript "cannot find ...

Enhancing ES6 capabilities with Angular polyfills

While exploring the Angular documentation and various online resources about Angular, I came across a question. If all code is written in Typescript, why would we need ES6 polyfills? My understanding is that webpack eventually transpiles the code to ES5, s ...

Uploading Code to Github for the Second Round

After successfully building my Angular code and publishing it to the Github repository, I specified the directory as dist/projectname. As a result, only my dist folder is visible on the Github Pages in my repository. Now, I want to push the complete code ...

OneGraph and Graphql Codegen produce enums with numerical representations

After migrating my project's codebase from using the direct Headless Wordpress GraphQL endpoint to OneGraph for Google+Facebook Business support, I encountered an error related to apollo referencing the output codegen. Here is the specific error messa ...

Converting the information retrieved from Firebase into a different format

My Project: In my Angular SPA, I am trying to retrieve data from Firebase and display specific values on the screen. Approach Taken: The data returned from Firebase looks like this: Returned Data from Firebase Error Encountered: In order to display the ...

Tips on how to dynamically uncheck and check the Nebular checkbox post-rendering

I incorporated a nebular theme checkbox into my Angular 8 App. <nb-checkbox [checked]="enable_checked" (checkedChange)="enable($event)">Enable</nb-checkbox> I am able to update the checkbox using the Boolean variable "enable_checked". Initia ...