Interconnected Angular libraries

Seeking assistance with Angular7 libraries.

In project A, I've created two libraries - library 1 and library 2. Library 2 depends on library 1. In a future project, like project B, I might utilize library 2.

The issue arises when specifying the dependency of library 2 on library 1. Currently, both libraries are stored in a folder called libs/ at the root level of the project. This setup allows imports from library 1 to work in library 2 without explicitly stating the dependency in its package.json file.

Library 1 package.json

{
  "name": "library-1",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0"
  }
}

Library 2 package.json

{
  "name": "library-2",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0",
    "@angular/material": "7.2.0",
    "library-1": "0.0.1"
  }
}

Their build and development locations are specified in the main tsconfig.json file:

{
  ...,
  "compilerOptions": {
    ...,
    "paths": {
      "library-1": ["libs/library-1", "projects/library-1/src/"],
      "library-1/*": ["libs/library-1/*", "projects/library-1/src/*"],
      "library-2": ["libs/library-2", "projects/library-2/src/"],
      "library-2/*": ["libs/library-2/*", "projects/library-2/src/*"]
    }
  }
}

Is there a way to ensure that the second library does not compile if the first one is missing?

angulartypescriptpackage.jsontsconfig

Answer №1

If you're facing a similar setup and are curious about my solution.

1. I included paths for different libraries in the main tsconfig.json file that direct to specific public_api.ts files. This allows for instant compilation when using the library in the main project.

{ 
   ...options,
   "paths": { 
       "library-1": "projects/library-1/src/public_api.ts",
       "library-2": "projects/library-2/src/public_api.ts"
   }
}

2. I added a peer dependency in the package.json of library-2 to reference library-1. This triggers a warning if you try to use library-2 without including library-1 as a dependency.

{
    ...options, 
    "peerDependencies": {
         "library-1": "0.1"
     }
}

3. I introduced an additional tsconfig.build.json file which extends the tsconfig.lib.json and modifies the path for library-1 from the root tsconfig to utilize the compiled code of that library. This ensures that library-2 is built with compiled sources rather than simply importing directly from library-1.

{
  "extends": "./tsconfig.lib.json",
  "compilerOptions": {
    "paths": {
      "library-1": ["dist/libs/library-1"]
    }
  }
}

4. Follow this command to build library-2 and apply the new tsconfig.build.json configuration.

ng-packagr -p projects/library-2/ng-package.json -c projects/library-2/tsconfig.build.json

Answer №2

I encountered a similar issue with our tsconfig.json file

 "paths": {
      "dxp-lib-commons": [
        "projects/dxp-lib-commons/src/public-api.ts"
      ],
      "dxp-lib-components": [
        "projects/dxp-lib-components/src/public-api.ts"
      ],
      "dxp-lib-services": [
        "projects/dxp-lib-services/src/public-api.ts"
      ]
    },

The 'commons' folder serves as the foundation for the other two. Initially, I referenced the public-api.ts in development and everything worked smoothly. However, during the build process, an error occurred stating that 'rootDir' should contain all source files.

After researching multiple resources, I learned that for successful builds, it is necessary to reference the compiled commons from the dist directory rather than the public-api.ts file. As a result, I updated the paths in tsconfig.lib.prod.json for components and services:

"paths": {
  "dxp-lib-commons": [
    "dist/dxp-lib-commons"
  ]
}

And this solution resolved the issue.

Answer №3

A method to set the initial project as a dependency in the subsequent project can be achieved by specifying it in the package.json file:

"dependencies": {
    "Local Initial Project": "file:../myprojectfolder/myprojectpackagefolder"
    "Git Initial Project": "git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99e908db99e908d95989bd794809d9694989097">[email protected]</a>:initial-project.git" 
}

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

Protractor is the ultimate way to verify the visibility of an element

Does anyone have a good method for checking if an element is visible using Protractor? Here's what I've tried: element.isPresent().then(result=>{ expect(result).toBeFalsy(); }); This works well, but I want to specifically check if the ...

typescriptwebdriverprotractor

What methods are available to keep a component in a fixed position on the window during certain scrolling intervals?

I need help creating a sidebar similar to the one on this Airbnb page. Does anyone have suggestions for how to make a component stay fixed until you scroll past a certain section of the page? I am working with functional React and Material-UI components, ...

cssreactjstypescriptmaterial-uifrontend

The Google Recaptcha v2 seems to be playing hide and seek within my Angular app

I integrated Google reCaptcha V2 into my Angular application. After following the instructions provided on the official website: https://www.npmjs.com/package/ngx-captcha and adding the Google reCaptcha v2 key, I encountered an issue where the captcha div ...

angularrecaptcha

Can the base href in Angular be dynamically changed during runtime?

Within my single Angular application, I have set the base-href to /a/b/. This means that in my dist folder, there is an HTML file with <base href="/a/b/">. As a result, the browser recognizes that an image link like assets/images/logo.png can be foun ...

angularapache

Guide to implementing Angular 2 lazy loading with the Visual Studio 2015 ASP.NET Core Template Pack

I am currently working on implementing router lazy loading in Angular 2. My goal is to be able to do something like this: const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full', { path: 'about&apos ...

angularvisual-studio-2015webpackasp.net-core

Angular 4: Implementing a Re-login Dialog/Modal Using Interceptors

Issue Description I recently started working with Angular 4 and I am facing a challenge in handling user re-logging when the token expires. Let's Dive Into the Code I have implemented a response intercepter that checks for a 401 error in the respon ...

javascriptangular

Unique form input component design

I am looking to develop a custom form input component that will reactively work with Angular. I have already created the component in TypeScript (TS). import { Component, forwardRef, Input, OnInit } from "@angular/core"; import { ControlValueAccessor, NG_ ...

angularangular-reactive-forms

The configuration file for Typescript and Typeorm, specifically the .ts file, is encountering an error

Hello, I'm encountering an issue with my app.ts. When trying to load my settings from ormconfig.ts for the typeorm function that creates the connection, I receive the following error: No overload matches this call. Overload 1 of 3, '(name: stri ...

typescripttypeorm

Updating to Angular 2's latest release, rc5

Using forms provided in rc5 has been a challenge for me, as updating to that version is difficult. I attempted to follow a tutorial at but it was not compatible with rc3. Below is my boot.ts file: import { bootstrap } from '@angular/platform-browse ...

angular

In TypeScript, what specific term denotes a type of data?

Given the following code snippet: class Foo { } interface TypeProvider() { type(): ?; } class Bar implements TypeProvider { type(): ? { return (Foo); } } class Baz implements TypeProvider { type(): ? { return (Bar); ...

typescript

Angular 7: Create a versatile router with subdomain independence

I am interested in utilizing URLs with subdomains for user-specific spaces. For example, the user 'joe' would have his own area at The 'www' subdomain will host features common to all users such as sign up or news. My webserver is set ...

angular

Revealing the power of UIkit through webpack

When it comes to technologies like webpack, I must admit I'm quite new, but I am eager to learn. Currently, I am working on a project in Visual Studio that utilizes Angular 4 + ASP.NET core and has webpack already set up. The project comes with Boots ...

javascripttypescriptwebpackgetuikit

While running tslint in an angular unit test, an error was encountered stating 'unused expression, expected an assignment or function call'

Is there a method to resolve this issue without needing to insert an ignore directive in the file? Error encountered during command execution: ./node_modules/tslint/bin/tslint -p src/tsconfig.json --type-check src/app/app.component.spec.ts [21, 5]: unuse ...

angulartypescriptlint

What causes the occurrence of [Object object] instead of a memo being displayed when the memo is included in the transaction building process in Stellar

Having trouble adding a memo to a wallet generated on the Stellar network, encountering an XDR write error in the SDK. Error stack trace: TypeError: XDR Write Error: [object Object] is not a Memo at Function.write (webpack://WalletSDK/node_modules/@st ...

typescripttransactionsstellar

Angular: Object contains data, but its properties have not been defined

I am encountering an issue while trying to access properties of the Dto object filled from my rest service, as they are coming up undefined. Firstly, I fetch the data: this.mapservice.getAllCoordinates().subscribe((data: CoordinateDto[]) => { this.co ...

angular

What is the best way to individually update elements in an array in Ionic v5?

As a newcomer to Ionic and TypeScript, I would appreciate your kindness in helping me with a problem I am facing. I have an array of objects that get updated when adding an 'exercise', where you can specify the number of sets and reps. The issue ...

angulartypescriptionic-framework

Typescript error: The 'datepicker' property is not found on the type 'IAugmentedJQuery'

Currently, I am working with AngularJS and Typescript. I encountered an error stating "Property 'datepicker' does not exist on type 'IAugmentedJQuery'.". Can someone please provide guidance on how to fix this issue? angular.element(&a ...

javascriptjqueryangularjstypescript

Implementing Reactive forms to disable ng-select: A step-by-step guide

Is there a way to disable the ng-select component? I attempted to use the [disabled] property, but it did not have any effect. I also tried using form control to disable it, but that was unsuccessful as well. Check out this Stackblitz example for referenc ...

angularselectangular-reactive-forms

Utilizing Electron's BrowserWindow in a React Typescript Project: A Comprehensive Guide

I am currently exploring ways to incorporate third-party URLs like Disney+ or Spotify into my application. Unfortunately, using iframe is not feasible due to many sites blocking it. My initial thought was to utilize Electron's webview tag, but this op ...

reactjstypescriptelectron

Angular fails to combine values within routerLink

The issue is straightforward - I have a component that retrieves the last searched items saved in sessionStorage as an array of ListItem objects: export class SearchlistComponent { results = JSON.parse(<string>sessionStorage.getItem("lastSear ...

angulartypescriptspring-bootsession-storageangular-routerlink