Nx: Adding @ngwl/workspace fails is config files are not in root

Created on 6 Jun 2019  路  8Comments  路  Source: nrwl/nx

Expected Behavior

ng add @nrwl/workspace should work to add Nx to existing Angular CLI project.

Current Behavior

If config files such as tsconfig.app.json are stored in a subfolder such as src, the add will fail.

Failure Information (for bugs)

The failure is happening because the ng-add schematic extracts the locations of the config files from angular.json, it runs them through a getFilename() function that discards the rest of the path: https://github.com/nrwl/nx/blob/master/packages/workspace/src/schematics/ng-add/ng-add.ts#L381

Steps to Reproduce

  1. ng new nx-test
  2. cd nx-test
  3. mv tsconfig.app.json src
  4. Edit angular.json and update the "tsConfig" property of the project to the new path.
  5. ng add @nrwl/workspace.

Context

Please provide any relevant information about your setup:

Nx: 8.1
Angular CLI: 8

Failure Logs

    Renamed karma.conf.js -> apps/nx-test/karma.conf.js
    Path: tsconfig.app.json does not exist
    Renamed tsconfig.spec.json -> apps/nx-test/tsconfig.spec.json
    Renamed src -> apps/nx-test/src
    Renamed e2e -> apps/nx-test-e2e
ENOENT: no such file or directory, open 'apps/nx-test/tsconfig.app.json'
community angular bug

Most helpful comment

As a workaround, I needed to:

  • mv e2e/protractor.conf.js e2e/tsconfig.e2e.json src/tsconfig* src/karma.conf.js .
  • Change the paths above in angular.json
  • mv .prettierignore .prettierignore.bak (as the schematic assumes this doesn't exist)
  • mv .prettierrc.json .prettierrc.json.bak (ditto)

The schematic also chokes if any of the target directories exist, which is a minor annoyance when repeatedly running the commands and then resetting the changes (which removes the files but not the directories).

In addition, a few other problems I encountered, for posterity and / or very keen maintainers:

  • proxyConfig path in angular.json wasn't update (which already existed in my app)
  • nx.json had a corrupted e2e project name: {{project}}-e2e-e2e
  • the e2e root path didn't get updated in angular.json
  • the e2e project directory was incorrect: {{project}}-e2e-e2e
  • the apps/{{project}}/src/tslint.json wasn't updated with the right extends (pointed to ../tslint.json instead of ../../../tslint.json
  • the e2e tsconfig wasn't moved into the final directory (whereas the main app tsconfig was)
  • imports relative to the baseUrl in tsconfig.json were broken (understandable, but mentioning for completeness)
  • location of karma.conf.js changed, but basePath inside not changed to match
  • to get tests running, needed to move karma.conf.js and tsconfig.spec.json to the src directory (not sure why, or how to fix...)

All 8 comments

Hi, is there any progress on this, or at least a temporal fix?

I had to create a NX workspace from scratch, and try and merge the files from the two projects.

We have the same issue on an up-to-date angular8 project created by the ng-cli. Any support on this?

As a workaround, I needed to:

  • mv e2e/protractor.conf.js e2e/tsconfig.e2e.json src/tsconfig* src/karma.conf.js .
  • Change the paths above in angular.json
  • mv .prettierignore .prettierignore.bak (as the schematic assumes this doesn't exist)
  • mv .prettierrc.json .prettierrc.json.bak (ditto)

The schematic also chokes if any of the target directories exist, which is a minor annoyance when repeatedly running the commands and then resetting the changes (which removes the files but not the directories).

In addition, a few other problems I encountered, for posterity and / or very keen maintainers:

  • proxyConfig path in angular.json wasn't update (which already existed in my app)
  • nx.json had a corrupted e2e project name: {{project}}-e2e-e2e
  • the e2e root path didn't get updated in angular.json
  • the e2e project directory was incorrect: {{project}}-e2e-e2e
  • the apps/{{project}}/src/tslint.json wasn't updated with the right extends (pointed to ../tslint.json instead of ../../../tslint.json
  • the e2e tsconfig wasn't moved into the final directory (whereas the main app tsconfig was)
  • imports relative to the baseUrl in tsconfig.json were broken (understandable, but mentioning for completeness)
  • location of karma.conf.js changed, but basePath inside not changed to match
  • to get tests running, needed to move karma.conf.js and tsconfig.spec.json to the src directory (not sure why, or how to fix...)

Hi! i have the same issue, any progress on this?. i try to adding in to existing Angular 7 app

Sorry I don't think I'll have time to look at this soon.

I think it would be easier to address these issues one by one in small PRs that I think a community member should be able to do.

The list that @studds would be a great way to break it up. Thank you!

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 馃檹

The workaround proposed by @studds is out of date for Angular 10. I'm trying to move files using exactly the same command mv e2e/protractor.conf.js e2e/tsconfig.e2e.json src/tsconfig* src/karma.conf.js ., but some file has different names.

I won't create an empty project to migrate the whole code from the previous repository to a new one. Some suggestion?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jon301 picture jon301  路  3Comments

kmkatsma picture kmkatsma  路  3Comments

about-code picture about-code  路  3Comments

joelmuskwe picture joelmuskwe  路  3Comments

zpydee picture zpydee  路  3Comments