CODEWITHSUNDEEP
angulartypescriptmonorepoangular-library
Pieterjan
Pieterjan

Reputation: 3581

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

I've created 3 angular libraries/packages:

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:

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?

Upvotes: 7

Views: 8773

Answers (9)

Adrug
Adrug

Reputation: 303

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

Upvotes: 1

Evan Kleiner
Evan Kleiner

Reputation: 514

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.

Upvotes: 1

Igor Kurkov
Igor Kurkov

Reputation: 5101

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

Upvotes: 3

umunBeing
umunBeing

Reputation: 671

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";

Upvotes: 1

umunBeing
umunBeing

Reputation: 671

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

rm -rf node_modules/.cache

Upvotes: 2

Sherif eldeeb
Sherif eldeeb

Reputation: 2226

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

Upvotes: 0

Pieterjan
Pieterjan

Reputation: 3581

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
  • ...

Upvotes: -4

Lincoln Alves
Lincoln Alves

Reputation: 654

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!

Upvotes: 5

Datum Geek
Datum Geek

Reputation: 1568

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

Upvotes: 7

Related Questions