What is the best way to utilize a tsconfig "alias path" to import an @ngModule along with other definitions?

Repository Link: https://github.com/andreElrico/mono-repo-test

Stackblitz Example: https://stackblitz.com/github/andreElrico/mono-repo-test (noop; only to navigate smoothly)

Assume the structure below:

root/
├── projects/
│   ├── app1
│   ├── app2
│   ├── app3
│   ├── app4
│   ├── lib1
  • app1 - NOT FUNCTIONING << why am I unable to utilize the alias-path defined in root tsconfig? (
    "@lib1": ["projects/lib1/src/public-api"]
    ). It is a mix of app2 and app4.
  • Error message for app1: ` ERROR in projects/app1/src/app/app.component.ts:7:3 - error NG8001: 'lib-lib1' is not a known element:
    1. If 'lib-lib1' is an Angular component, then verify that it is part of this module.
    2. If 'lib-lib1' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (lib-lib1 component) `
  • app2 - working - follows the recommended Angular approach. It uses a tsconfig -> path to access the dist/lib1 (library build output)
  • app3 - working - utilizes relative paths to the EXACT file location as suggested
  • app4 - working - employs relative paths to the public_api.ts.

Why is app1 failing to compile successfully? That is the scenario I aim to resolve. Pathwise, everything seems correct :-/ ? The reason behind my desire to make app1 function is that I intend to submit a pull request on a library and a "test-app" already contains all imports in "library style" => (e.g. @lib1). Hence, it would be beneficial to map the standard nodemodule path of "@lib1" to the exact sources of the library present as siblings of this app. This way, I can quickly debug and develop a new feature. Naturally, I would remove @lib1 from package.json of the "test-app".

angulartypescript

Answer №2

If you have a module located in the apps/app1 folder and wish to import a shared component from sharedLibs/lib1, simply use the following:

import { component } from "../../sharedLibs/lib1"

This method may involve navigating through multiple directory levels, which can be cumbersome. In my opinion, it is more efficient to create a separate library stored in a private npm repository for projects that go beyond mere demonstration purposes.

Edit:

To access the library using an alias without having to navigate the entire path structure, you can modify the tsconfig.json file.

Locate the compilerOptions.paths section:

"paths": {
  "lib1/*": ["../../sharedLibs/lib1/*"],
  "lib2/*": ["../../sharedLibs/lib2/*"],
  "lib3/*": ["../../sharedLibs/lib3/*"]
}

It is advisable to prioritize these paths over the contents of the node_modules directory when dealing with library projects.

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

Explaining the process of defining an object type in TypeScript and the conversion from JavaScript

Currently, I am attempting to enhance the background of a React website developed in typescript (.tsx) by incorporating particles. My approach involves utilizing the particle-bg component available at: https://github.com/lindelof/particles-bg However, whe ...

reactjstypescript

What is the best way to configure Jenkins to exclude or include specific component.spec.ts files from being executed during the build

Currently, I am facing an issue while attempting to include my spec.ts files in sonarqube for code coverage analysis. However, my Jenkins build is failing due to specific spec.ts files. Is there a way to exclude these particular spec.ts files and include ...

javascriptangulartypescriptjenkins

Changing function arguments in TypeScript using the spread operator

Could the Tuple spreading syntax in Typescript be utilized to consolidate these function overloads? The challenge lies in the necessity to refactor the function arguments into new types. type Type = TString | TNumber type TString = { tag: 'string&apos ...

typescript

Exploring the JSON Array in Angular5 with the power of ngFor

Currently, I am working on a project using Angular5 and encountering an issue with the *ngFor directive. The model class I have defined looks like this: export class FetchApi { value: Array<String>; api_status: string; api_version: string; d ...

arraysjsonangulartypescriptangular5

Having difficulty generating an Angular 5 Universal server application bundle with @ngtools/webpack

I am currently working on developing a cross-platform app using Angular 5 and WebPack without utilizing the CLI. The main issue I am facing is that I am unable to get the express application to function properly, resulting in encountering the following er ...

node.jsangularexpresswebpackangular-universal

How to correctly deserialize dates in Angular 5

When working with Angular 5, I have encountered an issue where JSON data from an API is not properly deserialized into dates within an array. My model includes a definition like this: export interface ProcessDefinition { _id?: string; proces ...

angulartypescripttype-conversionobservable

What is the best way to switch the direction of the arrows based on the sorting order?

Is there a way to dynamically change the direction of arrows based on sorting, similar to the example shown here? sortingPipe.ts: import { SprBitType } from '../spr-bit-type/sprBitType'; import { Pipe, PipeTransform } from '@angular/core& ...

htmlcssangulartypescript

When attempting to update Ionic2 from BETA11 to RC0, the error "bundle failed: 'InMemoryBackendService' is not exported" was encountered

An error occurred while bundling the application: 'InMemoryBackendService' is not exported by node_modules\angular2-in-memory-web-api\index.js (imported by src\app\app.module.ts). For assistance with resolving this ...

angularnpmupgradeionic2

What is the correct way to effectively integrate react-hook-form with redux and typescript?

After tirelessly searching for a comprehensive guide that could demonstrate all these requirements in one example, I eventually resorted to brute force to make something functional. However, I am well aware that this approach is not the correct way to achi ...

reactjstypescriptreduxreact-hook-form

What is the best method for inserting a 'Placeholder' in an Angular datePicker?

Looking for assistance with placing placeholder text inside an Angular datePicker, specifically wanting to display 'From' and 'To' labels within the datePicker. datePicker I am a novice when it comes to Angular development - can someon ...

javascriptangular

Troubleshooting issues with implementing Playwright in Angular framework

I want to automate my Playwright end-to-end tests that run during GitHub actions. The Angular App being tested is very small and simple (running version 16). Here is my main deployment.yml file: name: Deployment on: push: branches: - main w ...

angulargithub-actionsplaywright

Utilizing Firebase 3 with Ionic 2 and cordova-plugin-camera for seamless file uploading

I have been attempting to upload images to Firebase storage using the cordova-plugin-camera but have not been successful: Below is the code I have been using: let options:any = { quality : 100, destinationType : Camera.DestinationType.DATA_URL, ...

typescriptangularfirebaseionic2

Creating a flexible TypeScript function handler that accepts optional arguments depending on the function's name

I am facing a challenge with defining the function type for running helper functions that prepare database queries. Some of these functions have arguments, while others do not. TS Playground Link type PreparedQuery = { query: string; params?: string[] ...

typescript

Sending properties of an element to a function within Angular version 4 or 5

Trying to pass attribute values of elements to a function on button click, this is my approach: <div> <ul #list> <li class="radio" *ngFor="let option of options; let j = index" id={{i}}-{{j}} #item> <label><input t ...

javascriptangularangular5

How can I change an icon and switch themes using onClick in react js?

I have successfully implemented an icon click feature to change the colorscheme of my website (in line 21 and changeTheme). However, I also want the icon to toggle between FaRegMoon and FaRegSun when clicked (switching from FaRegMoon to FaRegSun and vice v ...

javascriptreactjstypescript

Utilizing Node.js Functions for Sharing Database Queries

When it comes to sharing DB query code among multiple Node.js Express controller methods, finding the best practice can be challenging. Many samples available online don't delve deeply into this specific aspect. For instance, let's consider a ge ...

node.jstypescriptexpressknex.js

Tips for effectively passing query string parameters in Angular

I am looking to make an HTTP request with parameters through a query For instance: URL: https://api/endpoint?d=1&value=2 ...

javascriptangulartypescript

Create an interface property that can accommodate various disparate types

In a React component, I am looking to use an external type (from react-hook-form) that can accommodate 3 specific types representing an object with form values. I initially thought about using a union type for this purpose, but encountered issues when pas ...

reactjstypescriptreact-hook-form

The text inside the Mapbox GL popup cannot be highlighted or copied

I'm encountering an issue where the text in my popups is unselectable. Even though I can close the popups through various methods, such as clicking on them, the pointer remains as a hand icon when hovering over the text and doesn't change to the ...

reactjstypescriptmapbox-gl-jsmapbox-glreact-map-gl

Angular 2: Finding the object with the highest attribute value in an array of objects

I am currently developing an Angular 2 application and I have an array of objects. My goal is to return the object that has the maximum value of a specific attribute (in this case, the object with the most likes). How can I achieve this in TypeScript? i ...

angulartypescript