Unable to to import modules from peer libraries in an Angular monorepo

Context

We have a monorepo Angular UI component library and we are trying to introduce Lerna 6.

The Problem

Compilation failure trying to build one of the libraries which has a dependency on a peer library of the monorepo.

✖ Compiling with Angular sources in Ivy partial compilation mode.
src/lib/components/gauge/gauge.component.ts:13:33 - error TS2307: Cannot find module '@ui-lib/core' or its corresponding type declarations.


We are using:

• Lerna 6
• Angular 13
• npm 8

And to note we are using npm workspaces.

The project structure

Reduced for brevity.

|-projects
|---ui-lib
|---core
|----ng-package.json
|----package.json
|----tsconfig.lib.json
|---charts
|----ng-package.json
|----package.json
|----tsconfig.lib.json
|-angular.json
|-package.json
|-dist
|---ui-lib
|---core


Snippet of charts package.json:

"dependencies": {
"@ui-lib/core": "file:../core",
"tslib": "^2.0.0"
}


Snippet of root package.json:

"workspaces": [
"./projects/ui-lib/*"
]


Snippet of lerna.json:

{
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
"version": "independent",
"useWorkspaces": true,
"workspaces" : [
"projects/ui-lib/*"
]
}


tsconfig.lib.json for charts library:

{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"outDir": "../../../out-tsc/lib",
"target": "es2015",
"module": "es2015",
"moduleResolution": "node",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"experimentalDecorators": true,
"importHelpers": true,
"types": [],
"lib": [
"dom",
"es2015"
]
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"flatModuleId": "AUTOGENERATED",
"flatModuleOutFile": "AUTOGENERATED"
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}


A component in the charts lib imports a module like so:

import {isNullOrUndefined} from '@ui-lib/core';


This is where the compilation issue occurs.

My background is more server side so I am not an advanced user of npm or Angular but I am struggling to find in the docs of these tools where we have gone wrong in establishing the dependency between the libraries.

Any help would be much appreciated.

Regards,

Continue reading...