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

Which is more efficient: Storing the database as a private member variable in Ionic 3 SQLite or creating a new database for every query

Here's a question for you - in the context of Ionic 3, what would be the preferable approach: keeping the opened database as a private member variable within a database provider class, or calling create every time a query is made to the database? For ...

angularsqlitetypescriptionic3ionic-native

What is the best way to merge the results of several runs of an observable function

When working with Firestore, I need to retrieve multiple documents, each with a unique sourceAddressValue. This means for a list of N strings, I may need to fetch N documents. I attempted the following approach: getLocationAddresses(addresses: string[]) { ...

angulartypescriptfirebaserxjsangularfire2

Discover every possible path combination

Looking to flatten an array of 1D arrays and simple elements, reporting all combinations until reaching a leaf "node." For example: // Given input array with single elements or 1D arrays: let input = [1, 2, [3, 4], [5, 6]]; The unfolding process splits pa ...

javascripttypescriptalgorithm

Comparing ngrx's createSelector method with Observable.combineLatest

Exploring the custom selectors from ngrx has left me in awe of their capabilities. Considering the example of using books for selectedUser, I find myself questioning the need for a custom selector like: export const selectVisibleBooks = createSelector(se ...

angularreduxobservablengrxcombinelatest

NPM packages: Providing a comprehensive assets and images delivery solution package

After creating a custom (angular2) npm package and uploading it to my personal registry, I encountered an issue with delivering the icons along with the component. The component should display an icon by using the following template: <span [class]="& ...

angularnpm

The error message "The function 'combineLatest' is not found on the Observable type"

Hey there! I'm currently working on implementing an InstantSearch function into my website using Angular 12.2. To accomplish this, I'll be working with a Firestore database with the index "book-data". In my search component, I have included the f ...

angularrxjsrxjs-compat

Is there a convenient method for setting up and activating real-time TypeScript checking in Windows 10 using VS Code?

After successfully installing VS Code on my Windows 10 system, I decided to follow the instructions provided here. Upon completion, Node and NPM were also installed correctly. However, I noticed a gap in the setup instructions between installing TypeScrip ...

typescriptvisual-studio-code

The namespace does not contain any exported member

Every time I attempt to code this in TypeScript, an error pops up stating The namespace Bar does not have a member named Qux exported. What could possibly be causing this and how can I resolve it? class Foo {} namespace Bar { export const Qux = Foo ...

typescript

Can someone provide a description for a field within typedoc documentation?

Here is the code snippet: /** * Description of the class */ export class SomeClass { /** * Description of the field */ message: string; } I have tested it on the TSDoc playground and noticed that there is a summary for the class, but not for it ...

javascripttypescriptnpmsummarytypedoc

What is the best way to transfer information between sibling child components under the same parent in Angular 4?

I am dealing with a parent component A that has two child components B1 and B2. B1 interacts with an API to fetch some data which needs to be consumed by B2. Is there a way to directly pass the data from B1 to B2? If not, what is the best method to transf ...

angular

Utilizing Typescript in tandem with an external library through es6 modules

Is there a recommended method for incorporating Typescript with non-module libraries like PixiJS and SortableJS without using webpacker? I'm looking to utilize es6 modules but want to avoid cumbersome solutions. What would be the best approach in this ...

javascripttypescript

Is there a way to implement a pipe function in TypeScript?

Introducing a unique pipe function implemented in plain JavaScript: const customPipe = (f, ...fs) => x => f === undefined ? x : customPipe(...fs)(f(x)) const exampleFunction = customPipe( x => x + 1, x => `wow ${x * 2} this is an amaz ...

typescript

Is there a way to automatically populate the result input field with the dynamic calculation results from a dynamic calculator in Angular6?

My current challenge involves creating dynamic calculators with customizable fields. For example, I can generate a "Percentage Calculator" with specific input fields or a "Compound Interest" Calculator with different input requirements and formulas. Succes ...

javascriptjsonangulartypescriptangular6

Is it possible to dynamically load the child path of the Foo Component from a separate component using the current route data?

What I am in need of: The application includes a side-nav component, which contains a menu to load features and a sub-menu to load sub-features. Sub-features are considered as child routes of features. I have attempted to utilize a sample application wit ...

angularangular-routingangular-router

The Express API is available for access on the localhost platform, but it cannot be accessed on

I am facing an issue with two MEAN (angular 4) apps where I need one app to fetch data from the other's API. The interesting thing is that one app retrieves the data successfully while the other does not. This discrepancy arises from the fact that one ...

node.jsangulargoogle-app-engineexpressmean-stack

Tips on executing an asynchronous operation before exiting

I have been attempting to execute an asynchronous operation before my process ends. By 'ends', I mean in every instance of termination: ctrl+c Uncaught exception Crashes End of code Anything.. As far as I know, the exit event handles this for ...

node.jsasynchronoustypescriptprocessterminate

How can I retrieve the decimal x and y coordinates when the mouse is moved in Typescript Angular?

I am in the process of transitioning my user interface from Flash/Flex, where it stores values in decimal format. I need to access and reuse these values. Here is a demo showcasing my problem. Here is a snippet: import { Component, Input } from '@an ...

javascriptangulartypescriptmouseevent

Incorporating ng2-bootstrap into an Angular2 project with SystemJS starter template

I am attempting to integrate the ng2-bootstrap modal functionality into a component of my project that is built using the angular2-starter. Below is my systemjs.conf.js configuration: /* * This config is only used during development and build phase onl ...

angulartypescriptsystemjsng2-bootstrap

How can I extract an object from an array by using a string key in either Observable or lodash?

How can I retrieve a specific object (show) from Shows based on its id being a string in a given sample? I am transforming the result into an RXJS Observable, so using functionalities from RXJS or lodash would be greatly appreciated. //JSON RETURNED with ...

javascriptangularlodashobservable

How to Modify a Module that was Imported in Typescript

Apologies for my inexperience in this language. I've been working on a custom Discord bot and encountered a problem. I implemented the feature to load commands dynamically from a folder, with each command as a module. However, when trying to create a ...

node.jstypescriptimportdiscord.jsnode-modules