Cannot use deep imports from buildable apps within buildable apps

In our project we have the following setup. Several buildable libraries One application

The application depends on all libraries, but one of the buildable libraries depend on the other two buildable libraries. We are staying away from barrelled imports, because after doing a bundle analysis on our project when we were using imports like

import {uiComponent1, uiComponent2} from '@libA';

we noticed that the whole library was added to the main bundle chunk which is not what we wanted. We wanted for each ui component to be added only where it was used. That’s why we switched to deep imports like:

import {uiComponent1} from '@libA/uiComponent1';
import {uiComponent2} from '@libA/uiComponent2';

This also required some changes to the tsconfig.base.json for allowing the deep imports:

    "paths": {
      "@test/shared/*": [
        "libs/shared/src/lib/*"
      ],
      "@test/design-system/*": [
        "libs/design-system/src/lib/*"
      ]
    }

This works fine and we now get a light main bundle. However, when I tried using deep imports from within another buildable library, I started getting errors like these:

libs/design-system/src/lib/design-system.component.ts:2:30 - error TS2307: Cannot find module '@test/shared/shared.function' or its corresponding type declarations.

2 import {SharedFunction} from '@test/shared/shared.function'
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I’ve tried adding tsconfig paths targeting the dist directory with no luck.

Current Behavior

Not being able to deep import tokens in a buildable library from a buildable library

Expected Behavior

Be able to deep import tokens in a buildable library from a buildable library

Steps to Reproduce

Ihave created an example repository where this can be observed. https://github.com/angelnikolov/nx-test Noticed that I am importing SharedFunction (residing in the shared library) with a deep import from the design-system library.

Failure Logs

➜  test git:(master) ✗ npm run affected:build

> test@0.0.0 affected:build /Users/anikolov/Desktop/test
> nx affected:build


>  NX   NOTE  Affected criteria defaulted to --base=master --head=HEAD


>  NX  Running target build for projects:

  - test
  - design-system
  - shared

———————————————————————————————————————————————

> nx run shared:build 
Building Angular Package

------------------------------------------------------------------------------
Building entry point '@test/shared'
------------------------------------------------------------------------------
✔ Compiling TypeScript sources through NGC
Bundling to FESM2015
✔ Writing package metadata
ℹ Built @test/shared

------------------------------------------------------------------------------
Built Angular Package
 - from: /Users/anikolov/Desktop/test/libs/shared
 - to:   /Users/anikolov/Desktop/test/dist/libs/shared
------------------------------------------------------------------------------

> nx run design-system:build 
Building Angular Package

------------------------------------------------------------------------------
Building entry point '@test/design-system'
------------------------------------------------------------------------------
✖ Compiling TypeScript sources through NGC
ERROR: libs/design-system/src/lib/design-system.component.ts:2:30 - error TS2307: Cannot find module '@test/shared/shared.function' or its corresponding type declarations.

2 import {SharedFunction} from '@test/shared/shared.function'
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

libs/design-system/src/lib/design-system.component.ts:2:30 - error TS2307: Cannot find module '@test/shared/shared.function' or its corresponding type declarations.

2 import {SharedFunction} from '@test/shared/shared.function'
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


———————————————————————————————————————————————

>  NX   ERROR  Running target "build" failed

  Failed projects:
  
  - design-system
  - test

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test@0.0.0 affected:build: `nx affected:build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the test@0.0.0 affected:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/anikolov/.npm/_logs/2021-01-11T18_31_54_110Z-debug.log

Environment

>  NX  Report complete - copy this into the issue template

  Node : 12.8.1
  OS   : darwin x64
  npm  : 6.10.2
  
  nx : Not Found
  @nrwl/angular : 11.0.20
  @nrwl/cli : 11.0.20
  @nrwl/cypress : 11.0.20
  @nrwl/devkit : 11.0.20
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 11.0.20
  @nrwl/linter : 11.0.20
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.0.20
  @nrwl/web : Not Found
  @nrwl/workspace : 11.0.20
  typescript : 4.0.5

[miluoshi]

Is there a way to generate/use secondary entry points for a library using @nrwl/web:package builder? I’ve tried to achieve it using custom Rollup config, but it always generated single bundle file in the output folder.

[angelnikolov]

@wolfhoundjesse It should be the possible yes. You just need to add the alias in your tsconfig file I think and it should work. This is the default for NX anyway. If you want the deep imports (your 2nd example) you can try out what Victor suggested above. I haven’t tried it yet tho.