Angular monorepo error TS6059: File 'ng-youtube-api.service.ngtypecheck.ts' is not under 'rootDir'. 'rootDir' is expected to contain all source files

Question

I've created 3 angular libraries/packages:

• @example/ng-youtube-player containing a YoutubePlayerComponent and YoutubeApiService
• @example/ng-dailymotion-player containing a DailymotionPlayerComponent and DailymotionApiService
• @example/ng-vimeo-player containing a VimeoPlayerComponent and VimeoApiService

Now I wanted to create a library containing a VideoPlayerComponent, using only the packages providing the YoutubeApiService, DailymotionApiService and VimeoApiService. In order to not include the other components unnecessarily, I want to split the 3 libraries each, so that I can install only the Service classes.

You could argue that angular uses tree-shaking, so the components will not be bundled with the application anyway, but anyhow I'd rather have those dependencies seperated for brevity.

I've tried setting up a monorepo containing 2 libraries and a test application, but from the moment I reference a service from another library, the build fails. I've created a very basic example workspace to reproduce the issue:

git clone https://github.com/PieterjanDeClippel/angular-monorepo-test
cd angular-monorepo-test
npm install
ng build @mintplayer/ng-youtube-api
ng build @mintplayer/ng-youtube-player
ng build ng-youtube-player-demo

# All projects compile successfully
# Now go to the NgYoutubePlayerComponent and uncomment the injection parameter in the constructor (line 16)

ng build @mintplayer/ng-youtube-player

The build fails with tons of the following errors:

✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/mintplayer/ng-youtube-api/src/lib/ng-youtube-api.service.ts:1:1 - error TS6059: File 'C:/Users/user/source/repos/Tmp/mintplayer-ng-youtube-player/projects/mintplayer/ng-youtube-api/src/lib/ng-youtube-api.service.ngtypecheck.ts' is not under 'rootDir' 'C:\Users\user\source\repos\Tmp\mintplayer-ng-youtube-player\projects\mintplayer\ng-youtube-player\src'. 'rootDir' is expected to contain all source files.
1 import { Injectable } from '@angular/core';
 
projects/mintplayer/ng-youtube-api/src/public-api.ts:1:1 - error TS6059: File 'C:/Users/user/source/repos/Tmp/mintplayer-ng-youtube-player/projects/mintplayer/ng-youtube-api/src/public-api.ngtypecheck.ts' is not under 'rootDir' 'C:\Users\user\source\repos\Tmp\mintplayer-ng-youtube-player\projects\mintplayer\ng-youtube-player\src'. 'rootDir' is expected to contain all source files.

There are 2 main problems here:

1. You have to build each project seperately, in the correct order
2. You cannot use services from libraries in other libraries

I've already read the following similar question, but it didn't help me out:

• 'rootDir' is expected to contain all source files

Code

My test code is hosted here. All instructions to reproduce the issue are noted in the code block above. The main changes I made are in the root tsconfig.json:

{
  ...
  "compilerOptions": {
    ...,
    "paths": {
      "@mintplayer/ng-youtube-api": [
        "projects/mintplayer/ng-youtube-api/src/public-api.ts"
      ],
      "@mintplayer/ng-youtube-player": [
        "projects/mintplayer/ng-youtube-player/src/public-api.ts"
      ]
    }
  }
}

I've already setup a workspace containing a library and application, where the application consumes classes from the library without any problems (see the 3 repositories on top of the question), but from the moment a library consumes classes from another library, the build is broken.

How can I fix this, and have a single workspace with 2 libraries and a test application?

Subastral

I think I'll be needing this: github.com/nrwl/nx-examples – Subastral

Answer 1

NX it is apparently: https://nx.dev. If you ever need to create an angular library, it's best to generate an NX project rightaway.

npm install -g @angular/cli@latest
npm install -g nx
npx create-nx-workspace
cd mycompany-ng-youtube-player

Generate a library for the youtube player:

nx g @nrwl/angular:lib mycompany-ng-youtube-player --buildable --publishable --import-path @mycompany/ng-youtube-player

Specify your package name and version in the package.json:

{
  "name": "@mycompany/ng-youtube-player",
  "version": "1.0.0",
  ...
}

Generate a library for the IFrame API:

nx g @nrwl/angular:lib mycompany-ng-youtube-api --buildable --publishable --import-path @mycompany/ng-youtube-api

Specify your package name and version in the package.json:

{
  "name": "@mycompany/ng-youtube-api",
  "version": "1.0.0",
  ...
}

Generate a component in the @mycompany/ng-youtube-player package:

cd .\libs\mycompany-ng-youtube-player\src\lib
nx g component ng-youtube-player --project=mycompany-ng-youtube-player --module=mycompany-ng-youtube-player --export

Generate a service in the @mycompany/ng-youtube-api package:

cd ..\..\..\mycompany-ng-youtube-api\src\lib
nx g service ng-youtube-api --project=mycompany-ng-youtube-api

Now you can add the package dependency to the package.json of the player:

{
  ...,
  "peerDependencies": {
    "@mycompany/ng-youtube-api": "~3.0.0",
    ...
  }
}

Now it's just a matter of modifying the code.

To build and run the application:

npm run nx run-many -- --target=build --projects=ng-youtube-player-demo --with-deps
npm run nx serve -- --open

Important note

If you're considering using NX, then you apparently need to bear the following in mind:

• Angular releases a new version (v14)
• Whoever uses your library, is waiting for you to release a @angular/core@v14 compatible version of your library
• You will be waiting for NX to support Angular 14
• NX is waiting for jest-preset-angular to release a v14 compatible version
• ...

Subastral

Also important that the path name recorded in the tsconfig is identical and only has a single / – Nildanile

Answer 2

if you're using nx and have the errors reported by the op...

i also encountered this problem...

it was killing me... i couldn't figure out why nx didn't build right... it was giving me tons of errors about one of my referenced project @scope1/lib2 and all of its .ts files being outside the project that referenced it... i also noticed that the dep-graph had @scope1/lib2 but there was no dependency arrow from the referencing library...

i found this fix:

rm -rf node_modules/.cache

i'm guessing nx had something in the cache that was wrong... after deleting, the dep-graph finally showed the link properly and the build started working

Upturned

Answer 3

Maybe I'm a little late here, but I was experiencing this problem here and I use just regular Angular CLI to manage my workspace...after searching A LOT and going through Typescript documentation on Module Resolution, I believe I understood what was going on:

Path mapping is a regular thing for Angular Libraries (especially when using a secondary entry-points strategy), but its behavior is a little tricky. Things get even more complicated when we have multiple libraries in the same workspace: sometimes the IDE goes crazy with errors; sometimes things look fine, but break during build; sometimes things are okay during the library's build, but it all explodes when building the consumer app/lib.

The problem is: consumers need the built version of the libraries to properly work, so they should be looking at the dist folder. The way I solved this was:

• Keep dev-time mappings (resolving to projects/...) in the root tsconfig.json
• Add mappings to built artifacts in the tsconfig used to build the consumer library (listed in angular.json configurations)

The IDE is happy, ng-packagr is happy hahahahh

Cheers!

Rearrange

Answer 4

For NX workspace this unobvious error "...is not under 'rootDir'. ..." can say that you imported some lib1 to another buildable lib2, and lib2 can't see lib1, moreover, you can't do this between libraries. This is forbidden in Nx to import publishable libraries into libraries, but the error is not described properly.

To solve this issue, you need to delete imported lib1 interfaces or classes from lib2, and it will start working again.

You can also take a look on this github issue https://github.com/nrwl/nx/issues/602

and possible fix https://github.com/nrwl/nx/issues/602#issuecomment-908064982

Sabotage

Answer 5

This was basically a cache issue for me in an angular/nx monorepo. Solved it using

rm -rf node_modules/.cache

Prat

Answer 6

After days of finding the reason for this bug, my error was due to webstorm importing the model file using incorrect import part.

import { Invoice } from "libs/invoicing/src/lib/invoice/invoice.model";

should have simply been

import { Invoice } from "../../../../invoice/invoice.model";

Prat

Answer 7

In my case (using NX v16.10.0), I had a misalignment between my library name in my tsconfig.base.json file and the library's generated package.json file.

For example, I had updated the library name in the tsconfig.base.json to @lib/shared-new-feature, but the package.json file still had a name of new-feature.

Sclerodermatous

worked in my case! wasted the whole afternoon because of this :/ – Schultz

Answer 8

I got a similar error message but because of a secondary entry point library. I used NX CLI to generate a library as a secondary entry point for the existing one (it was a testing library for the root one). So I imported the root library into testing so the import was relative.

import { CustomService } from '../../../src

I changed it to node_modules like

import { CustomService } from '@myorg/libname'

P.S. I hope people read all answers on the question not only the most upvoted :D

Internecine

Answer 9

you are probably importing a module from outside your library's rootDir which mostly is src

example:

// src/file.ts
import something from '../../another-module' //<-- ouutside rootDir

Pappose