Angular NX: Managing multiple libraries with identical names

Currently integrating Angular with NX, I have established two distinct groups: books and cars. My goal is to develop an overview library for each group that includes a table for viewing either books or cars.

To start, I created the library under libs/books/overview. Next, I attempted to replicate the same process for cars using libs/cars/overview, only to encounter the following error:

Error: Project name already exists.

Would it be necessary to title the libraries as books-overview? In this case, the new structure would look like: libs/books/books-overview. However, since both instances of "books" seem redundant, this may not be the most efficient approach.

angulartypescriptnrwl-nxnrwl

Answer №1

To avoid conflicts, the folder name doesn't necessarily have to match the app name. Instead, you can create a parent folder for each segment of your library name separated by dashes.

For example, you could create a library named 'books-overview' in the folder books/overview.

When running the command with the folder structure as the name, it will correctly determine the appropriate naming convention. For instance:

npx ng generate @nrwl/workspace:library --name=books/overview

This command will generate the library 'books-overview' in the folder books/overview.

Here's an example configuration from our application (we also utilize nx):

// excerpt from angular.json
"api-java-model": {
  "projectType": "library",
  "root": "libs/api/java/model",
...
},
"api-java-client": {
  "projectType": "library",
  "root": "libs/api/java/client",
...

This method helps prevent any folder collisions that may occur.

Answer №2

In my opinion, the most ideal solution in this situation would be to establish a directory called overviews and place all the libraries inside it. For example:

libs/overviews/cars

libs/overviews/books

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

Angular 5 combined with the dynamic capabilities of Popper.JS

Launching a training project that requires Popper.Js in its features has been quite challenging. Despite following Bootstrap's documentation on how to implement Popper.Js, I have encountered difficulties. As per Bootstrap's docs, I tried initiat ...

javascriptangulartwitter-bootstraptypescriptangular5

Add a calendar icon to the DateRangePicker in React Mui

I am trying to set up a DateRangePicker using Material UI with a calendar icon. Here is an example of how I want it to look: https://i.stack.imgur.com/LnYnY.png After following the API documentation and using this code: components={{ OpenPickerIcon: Cal ...

reactjstypescriptmaterial-uireact-typescript

Controlling CSS Styles in Angular using TypeScript

Currently, I am working on an Angular project that involves dynamically populating a calendar. In addition to this, I have a range of dates and the task at hand is to modify the background for specific days within this date range. To manage dates effective ...

cssangulartypescriptmomentjs

An issue has occurred in my deeply nested reactive form where I am unable to read the properties of null, specifically the 'controls' property

I have encountered an issue with a deeply nested form that communicates with a REST endpoint upon submission. While the first two levels of the form are functioning properly, I am facing numerous challenges when trying to work with the third level. One par ...

angulartypescriptangular-reactive-forms

Using regular expressions in TypeScript to declare modules

Is there a more efficient method to declare multiple modules in TypeScript? An example of the code I am trying to simplify is: declare module '*.png'; declare module '*.jpg'; declare module '*.gif'; declare module '*.svg ...

typescriptdeclare

Enable the acceptance of various validator patterns within Angular Material 2

I'm using md-error in angular material to validate user inputs from the client side. Currently, I am trying to validate an input field that accepts two types of patterns: Pattern 1: Accept the first 9 characters as numbers followed by the 10th ch ...

angularjsvalidationtypescriptangular-material

Angular 2 HTTP Request returns status code 0

items.component.ts import {Component, OnInit} from '@angular/core'; import {Item} from './Item'; import {ItemService} from "./item.service"; import {Router} from "@angular/router"; @Component({ moduleId: modu ...

angularjsangular

Dealing with Angular 6 HTTP Interceptor and the frustrating net:: ERR_TIMED_OUT error

I have been puzzling over something recently that has left me scratching my head. Within my interceptor, there is code that deals with parsing and handling errors in specific ways based on factors such as status codes. While I haven't included this c ...

angularhttpxmlhttprequesttimeoutinterceptor

Unpacking objects in Typescript

I am facing an issue with the following code. I'm not sure what is causing the error or how to fix it. The specific error message is: Type 'CookieSessionObject | null | undefined' is not assignable to type '{ token: string; refreshToken ...

typescriptexpress

Having trouble opening a JPEG file that was generated using the Writefile Api in Ionic-Cordova

Currently, I am using the writeFile API to create a JPEG image. The process is successful and the image is stored in the directory as expected. However, when I try to open the file manually from the directory, I encounter an error message saying "Oops! Cou ...

javascriptangularcordovatypescriptionic-framework

Securing Angular applications with Firebase real-time database authentication

I've been working on setting up a guard for Angular routes based on user data in Firebase Realtime Database. In the database section, I have assigned admin privileges with a property of "dashboard: true" as shown in this image. My goal is to only allo ...

angularfirebasefirebase-realtime-databasefirebase-authentication

Unable to connect Angular custom NPM package

Hey everyone, I've just created my own custom dynamic tooltip npm package. However, when I try to use it in an app, I encounter the following error: Can't bind to 'appDynamicTooltip' since it isn't a known property of 'div&a ...

angulartypescriptnpm

Challenges with Spreading Props in TextField Component After MUIv4 Upgrade with TypeScript

Latest Material-UI Version: 4.1.0 I'm encountering difficulties in passing props to an abstracted <TextField /> component that I've developed. Below is the snippet of code: PasswordInput.tsx import * as React from 'react' impo ...

reactjstypescriptmaterial-uimui

Verifying Whether Objects in TypeScript File Adhere to a Certain Interface

Currently, I am in the process of developing a procedure that scans through a collection of *.ts files within a directory to identify those containing a class that implements a specific interface. While my preference is to be able to detect multiple classe ...

typescript

When incorporating Papaparse with Angular 2, encountering the issue "Identifier 'Papa' is not found" may arise

Currently, I am facing an issue in my project where after deleting and re-installing node_modules to resolve errors, the definition of 'Papa' is missing. As a result, when npm updated the node modules again, Angular 2 is unable to find 'Papa ...

angulartypescriptpapaparse

I am looking to invoke the Token API from Microsoft Graph during an Angular 7+ HTTP request

My goal is to make an API call from my Angular application to retrieve an access token from . With this token, I then aim to access the https://graph.microsoft.com/v1.0/users/##UserId##​​​​​​​​​​​​​/getMemberGroups endpoint withou ...

angularazure-active-directorymicrosoft-graph-apiadal

Issue arises when trying to set object members using a callback function in Typescript

I am facing a peculiar issue that I have yet to unravel. My goal is to display a textbox component in Angular 2, where you can input a message, specify a button label, and define a callback function that will be triggered upon button click. Below is the c ...

javascriptangulartypescript

Issue in Angular/Jasmine: TypeError - Attempting to access the 'labels' property of an undefined value in Angular

While writing unit tests for components, I encountered an error in the terminal when running the tests. The error message displayed was: TypeError: Cannot read property 'labels' of undefined. There were a total of 3 function errors that ...

angulartypescript

Async/await is restricted when utilizing serverActions within the Client component in next.js

Attempting to implement an infinite scroll feature in next.js, I am working on invoking my serverAction to load more data by using async/await to handle the API call and retrieve the response. Encountering an issue: "async/await is not yet supported ...

javascriptreactjstypescriptnext.jsasync-await

Experiencing difficulties establishing a connection with my NodeJs server socket and TypeScript

I've been struggling to run the code from this post and I really need some help. The code can be found at: https://medium.com/@mogold/nodejs-socket-io-express-multiple-modules-13f9f7daed4c. I liked the code as it seems suitable for large projects, but ...

node.jstypescriptexpresssocketssocket.io