Troubleshooting Issue with Angular Library: Live Reload Feature Not Functioning

In setting up my Angular workspace, I have 3 libraries and one application (with more to be added in the future). This is how the TypeScript paths are configured:

    "paths": {
      "@lib/a/*": [
        "projects/libs/a/*",
        "projects/libs/a"
      ],
      "@lib/a": [
        "dist/a/*",
        "dist/a"
      ],
      "@lib/b/*": [
        "projects/libs/b/*",
        "projects/libs/b"
      ],
      "@lib/b": [
        "dist/b/*",
        "dist/b"
      ],
      "@lib/c/*": [
        "projects/libs/c/*",
        "projects/libs/c"
      ],
      "@lib/c": [
        "dist/c/*",
        "dist/c"
      ],
    }

Although everything builds successfully, live reload does not work when running ng serve.

I attempted a different path setup that initially worked, but then I encountered an error saying Unable to reference..., resulting in the libraries no longer building.

Can anyone suggest why this may be happening?

angulartypescripttsconfigng-packagr

Answer №1

It is advisable to avoid referencing dist/... within your tsconfig.json file. I recommend the following approach instead:

"paths": {
  "@lib/a/*": [
    "projects/libs/a/*"
  ],
  "@lib/b/*": [
    "projects/libs/b/*"
  ],
  "@lib/c/*": [
    "projects/libs/c/*"
  ]
}

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

There is no overload that matches this call in Next.js/Typescript

I encountered a type error stating that no overload matches this call. Overload 1 of 3, '(props: PolymorphicComponentProps<"web", FastOmit<Omit<AnchorHTMLAttributes, keyof InternalLinkProps> & InternalLinkProps & { ...; ...

typescriptnext.jshrefreact-propsreusability

Is there a syntax available for type annotation of arrays created from pre-declared variables?

According to my standards, all possible annotations are required in TypeScript. Therefore, TypeScript-ESLint is prompting me to annotate the `[ responseData, cognitoUser ]`. However, when I try to use the syntax `[ responseData1: ResponseData1, responseD ...

typescripttypescript-eslint

Is it possible to use the Optimistic Hook with boolean values?

I am facing an issue with a switch component where the checked value is updated only after refetching the data when the user is changed to an admin status. Currently, there is a delay when clicking the switch as it takes time to load and then updates. It ...

reactjstypescriptreact-hooks

What is causing the reluctance of my Angular test to accept my custom form validation function?

I'm currently facing an issue with testing an angular component called "FooComponent" using Karma/Jasmine. Snippet of code from foo.component.spec.ts file: describe('FooComponent', () => { let component: FooComponent let fixture ...

javascriptangulartypescriptjasminekarma-runner

Learn how to trigger an HTTP exception after a failed command in a saga with NestJS CQRS

Currently utilizing the NestJS CQRS pattern to handle interactions between User and UserProfile entities within my system. The setup consists of an API Gateway NestJS server along with dedicated NestJS servers for each microservice (User, UserProfile, etc. ...

javascripttypescriptdomain-driven-designnestjscqrs

Set up Admin SDK using appropriate credentials for the given environment

As someone new to Node.js, Firebase Cloud Functions, and TypeScript, my objective is to create a cloud function that acts as an HTTP endpoint for clients to authenticate with Firebase. The desired outcome is for the cloud function to provide a custom acces ...

node.jstypescriptfirebasegoogle-cloud-functions

A more concise validation function for mandatory fields

When working on an HTML application with TypeScript, I encountered a situation where I needed to build an error message for a form that had several required fields. In my TypeScript file, I created a function called hasErrors() which checks each field and ...

javascripthtmlvalidationtypescript

The angular2-markdown module encounters errors

I am currently working on implementing a markdown editor in a form within my Angular2 project. To achieve this, I have installed the angular2-markdown module. However, I encountered an error when trying to use it, specifically: "marked" is not a function. ...

angularnpmmarkdown

Issues with getOptionLabel in Material UI

I have a constant with the following values : const Reference = [ { label: "RF-100", year: "Test" }, { label: "RF-200", year: "Test2" }, { label: "RF-300", year: "Test3" }, ]; and my Autoco ...

reactjstypescriptmaterial-ui

Saving the authenticated user's information from Firebase (including first name, last name, gender, and more) directly to our database

I am utilizing firebase authentication for user registration and login. Upon registration/login, I aim to save additional user details (such as FirstName, LastName, Gender, etc.) in my database. Currently, I have a process in place to achieve this. Howeve ...

node.jsangularfirebaseexpressfirebase-authentication

Angular i18n simplifies the process of internationalizing and local

Is there a way to display different labels based on the user without using conditionals? I want to maintain consistency in this large project. For example: When User 1 is logged in: <h1>Hello, I am User 1</h1> When User 2 is logged in: < ...

angularangular9angular-elements

What is the best way to assign a value to an ngrx reducer/action in order to update the state?

As a newcomer to Angular ngrx, I am in the process of integrating it into my 'standard beginner-project' by replacing all @Input()s and @Output()s. While incrementing and decrementing the state is straightforward, I am faced with the challenge of ...

angularngrx-storereducers

Error: Cannot access Angular 5 Title service at this time

When attempting to change the page title using BrowserModule, I encountered an issue. I added the BrowserModule and Title in the application module as shown here: https://angular.io/guide/set-document-title However, in a child module where I tried to add ...

angulartypescripttitle

Searching for the position of different size values according to their specific value

information = { boxNoTo: 1, boxNoFrom: 1, size: 'M', } items = [{ size: 'M', },{ size: 'M', },{ size: 'S,M,L,XS', boxNoTo: 1, boxNoFrom: 1, country: 'CA', name: 'Josh' }] This is what I have don ...

javascripttypescript

Searching with Mat-autocomplete across multiple fields simultaneously

I am struggling with a mat-autocomplete that contains 5000 objects, each consisting of a first name and a last name. My goal is to search for both the first name and last name simultaneously regardless of the input order. Currently, I can only search one ...

angularangular-material

What is the best way to generate a dummy ExecutionContext for testing the CanActivate function in unit testing?

In my authGuard service, I have a canActivate function with the following signature: export interface ExecutionContext extends ArgumentsHost { /** * Returns the *type* of the controller class which the current handler belongs to. */ get ...

typescriptnestjs

Unable to create a new collection in Firebase Firestore

I encountered an issue while trying to add a collection in Firebase Firestore using the function .collection(doc).set. Despite finding the new user in authentication in Firebase, the collection was not created and the console displayed an error message. ...

javascriptangularfirebasegoogle-cloud-firestore

Utilizing custom routing rules to fetch data from a local JSON file using http.get in Angular 2

Currently facing a challenge with Angular as a beginner, specifically when attempting to retrieve a local .json file using http.get. The issue seems to be related to my routing configuration, and I'm unsure how to resolve it. File Structure: api ...

jsonangularangular2-routingangular-routing

Issue with Figma React plugin's PostMessage functionality not behaving as anticipated

I am currently working on developing a plugin for Figma, following the react example provided on their GitHub page: https://github.com/figma/plugin-samples/tree/master/react One of the functionalities I have implemented is a button that triggers a specifi ...

reactjstypescriptpluginsfigma

What is the cause of the error message "property 'map' is undefined"?

I am currently working on a service that looks like this: public getUsers() { return this.httpClient.get(environment.BASE_URL + `api/all`); } In my component, I have implemented the ngx-bootstrap table to display the user data. import { Component, OnI ...

angulartypescript