Nx: Errors after adding @nrwl/workspace to Angular CLI 10.1.x project

[cjanz]

Current Behavior

After converting a plain Angular CLI 10.1 project to an Nx workspace via ng add @nrwl/workspace there is no tsconfig.base.json on root level. This leads to the following problems:

• Building, testing or starting the app fails because the tsconfig.*.json files in apps/ refer to the missing tsconfig.base.json file
• Adding a library via ng generate @nrwl/angular:library --name=test exits with error Cannot read property 'paths' of undefined

Expected Behavior

After adding Nx to the project all tasks (build, start, test, ...) should run without errors. I.e. the tsconfig files should be consistent by either referencing root tsconfig.json or by creating a tsconfig.base.json when running the ng-add schematic.

The problem does not occur with Angular CLI 10.0 because this version creates a project with solution style tsconfig files.

Steps to Reproduce

npm i -g @angular/cli
ng new --routing ng-cli-10_1_1_app
cd ng-cli-10_1_1_app
ng add @nrwl/workspace

After that execute a build task, e.g.

npm start

or try to generate a library:

ng generate @nrwl/angular:library --name=test

Failure Logs

npm start

> ng serve

> ng run ng-cli-latest-app:serve 
An unhandled exception occurred: error TS5083: Cannot read file '/pathToProject/ng-cli-latest-app/tsconfig.base.json'.

> Executing task: ng generate @nrwl/angular:library --name=test --style=scss --directory=shared --no-interactive --dry-run <

Cannot read property 'paths' of undefined

Environment

  nx : Not Found
  @nrwl/angular : 10.3.0
  @nrwl/cli : 10.3.0
  @nrwl/cypress : 10.3.0
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 10.3.0
  @nrwl/linter : 10.3.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.3.0
  @nrwl/web : Not Found
  @nrwl/workspace : 10.3.0
  typescript : 4.0.2

Thanks in advance for looking into this issue.

[vikramthyagarajan]

Hi, to anyone facing this issue, I copied the root tsconfig.json (after ng add @nrwl/workspace) and pasted it into a root tsconfig.base.json file, and everything worked perfectly - compilation works and the app is running. Not sure if this quickfix might cause any issues in the future, but this seems to work for now

[ironstine]

Thanks @vikramthyagarajan, confirming your solution worked for me as well!

Unfortunately it didn't resolve the issue of being able to use the (super useful) nx console command 'Nx generate (ui)' to pre-populate the directory where a lib is placed.

I'm also using Angular 11.

  @nrwl/angular : 10.4.4
  @nrwl/cli : 10.3.2
  @nrwl/cypress : 10.4.4
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 10.4.4
  @nrwl/linter : 10.4.4
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.4.4
  @nrwl/web : Not Found
  @nrwl/workspace : 10.4.4
  typescript : 4.0.5