error TS6059: ' is not under 'rootDir', 'rootDir' is expected to contain all source files

Question

I'm experiencing issues with deploying an application I'm working on with Angular and NX. The issue I'm facing is that I don't quite grasp how the application should be configured to avoid this error. At the root of the entire project, I have:

Project Root:

|-- apps
|   |-- app ngshop
|   |-- app admin

|-- environments

|-- libs
|   |-- orders
|   |-- products
|   |-- ui
|   |   |-- src
|   |   tsconfig.json

|-- nx.json
|-- tsconfig.base

So, it seems like I'm unable to access the files from the libraries when I try to deploy the admin or ngshop app.

Here is the 'nx.json' configuration:

{
    "$schema": "./node_modules/nx/schemas/nx-schema.json",
    "npmScope": "bluebits",
    "affected": {
      "defaultBase": "master"
    },
    "cli": {
      "packageManager": "npm"
    },
    "tasksRunnerOptions": {
      "default": {
        "runner": "nx-cloud",
        "options": {
          "cacheableOperations": [
            "build",
            "lint",
            "test",
            "e2e"
          ],
          "accessToken": "ZTEyOGYxNjMtZjM4Mi00YzQ0LTk1N2MtYzJiMGY5NzYxZDIxfHJlYWQtd3JpdGU="
        }
      }
    },
    "targetDefaults": {
      "build": {
        "dependsOn": [
          "^build"
        ],
        "inputs": [
          "production",
          "^production"
        ]
      },
      "pluginsConfig": {
        
      },
      "lint": {
        "inputs": [
          "default",
          "{workspaceRoot}/.eslintrc.json"
        ]
      },
      "e2e": {
        "inputs": [
          "default",
          "^production"
        ]
      },
      "test": {
        "inputs": [
          "default",
          "^production",
          "{workspaceRoot}/jest.preset.js"
        ]
      }
    },
    "generators": {
      "@nx/angular:application": {
        "style": "scss",
        "linter": "eslint",
        "unitTestRunner": "jest",
        "e2eTestRunner": "cypress"
      },
      "@nx/angular:library": {
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "@nx/angular:component": {
        "style": "scss"
      }
    },
    "defaultProject": "ngshop",
    "namedInputs": {
      "default": [
        "{projectRoot}/**/*",
        "sharedGlobals"
      ],
      "sharedGlobals": [],
      "production": [
        "default",
        "!{projectRoot}/.eslintrc.json",
        "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
        "!{projectRoot}/tsconfig.spec.json",
        "!{projectRoot}/jest.config.[jt]s",
        "!{projectRoot}/src/test-setup.[jt]s"
      ]
    }
  }

Here is the 'tsconfig.base' configuration:

  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@bluebits/orders": ["libs/orders/src/index.ts"], 
      "@bluebits/products": ["libs/products/src/index.ts"],
      "@bluebits/ui": ["libs/ui/src/index.ts"],
      "@bluebits/uiBanner": ["libs/ui/src/lib/components/banner/banner.component.ts"],
      "@bluebits/users": ["libs/users/src/index.ts"],
      "@env/*": ["environments/*"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

And here is the 'tsconfig.json' configuration for the UI library, for example:

  "extends": "../../tsconfig.base.json",
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ],
  "compilerOptions": {
    "target": "es2020",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

The issue started with environment variables, as I was getting an error stating that they should be inside each library. What I did was make a copy of the file and put it inside each lib. I know it's not the best practice, but I couldn't find another solution. However, now I'm encountering the same error with other modules from the UI libraries:

> NX libs/ui/src/lib/Components/banner/banner.component.ts:1:1 - error TS6059: File 'C:/Users/Ale/Desktop/EC-eshop-FrontEnd/bluebits/libs/ui/src/lib/Components/banner/banner.component.ngtypecheck.ts' is not under 'rootDir' 'C:\Users\Ale\Desktop\EC-eshop-FrontEnd\bluebits\libs\products\src'. 'rootDir' is expected to contain all source files.

And like this one, I have several more errors of the same type.

Finally, I want to emphasize that any assistance will be greatly appreciated. Thank you very much.