Migrate existing .angular-cli.json to angular.json?

[Nxt3]

I just tested out the new ng update but noticed it doesn't modify the .angular-cli.json file. I know this functionality exists within the standard @angular/cli but the problem is that it doesn't handle the migration as I'd expect. It lists everything as an app (regardless of whether it is a lib from nrwl) and gives everything e2e tests. I fixed most of this manually, but was hoping for an automatic way of doing this.

Is there a better way currently to migrate?

[juristr]

I just completed the same process. Nrwl/nx apparently doesn't do the update, but you have to do it with the proper ng update @angular/cli afaik (right @vsavkin).

So I did

• yarn add global @nrwl/schematic@next to get the latest rc.2 nrwl schematics
• yarn update to update my NX workspace which generated the nx.json at the root of the repo and a couple of other stuff
• ng update @angular/cli to update the CLI
• ...continuing with updating the Angular dependencies (found couple of bugs during that process).

[Nxt3]

@juristr But did you have to manually adjust a bunch of things in your angular.json file? That's the pain point. I actually don't know what I need to change at the risk of creating a bigger headache for myself so I left most if it alone lol

[juristr]

I had to adjust basically this: angular/angular-cli#10883. But it seems like a bug in the @angular/cli, we'll see. Otherwise my assets didn't get copied over.

Right now the project compiles, but

• lazy loaded modules somehow don't work any more (nx v6: testing upgrade - getting runtime error when lazy loading a routed module from libs #490)
• running tests kinda works. The new CLI considers having one test config per app, while NX has one global karma.conf.js. I slightly adjusted that one, and simply run the test with one app of the workspace ng test <one-of-the-app> but which points to the global karma.conf.js in the root folder and thus runs all tests.
• NX commands like yarn dep-graph fail with an error right now

[Nxt3]

@jschwarty Yeah this is still busted on the latest version. I wish the nrwl team would outline what an angular.json file should look like after an upgrade so I could at least do it manually. Right now, it's mostly guess and check.

[vsavkin]

@Nxt3 every lib should have the following record in angular.json:

    "dir-mylib": {
      "root": "libs/dir/mylib",
      "sourceRoot": "libs/dir/mylib/src",
      "projectType": "library",
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "libs/dir/mylib/src/test.ts",
            "karmaConfig": "libs/dir/mylib/karma.conf.js",
            "scripts": [],
            "styles": [],
            "assets": [],
            "tsConfig": "libs/dir/mylib/tsconfig.spec.json"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/console/feature-auth/tsconfig.lib.json",
              "libs/console/feature-auth/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      },
      "prefix": ""
    },

It looks like the upgrade process fails for you. Do you see any error message when running ng update?

[Nxt3]

@vsavkin I never see any error messages. My converted libs do not look like that.

[NgxDev]

@Nxt3 do you remember what versions did you tried the update from?
I'm trying from:

@nrwl/schematics: 0.6.19 --> 6.1.0
@angular/cli: nrwl/fix-cli-build#release16 --> 6.0.8

And in order to run ng update @nrwl/schematics I have to update the CLI first, since there is no ng update command prior to v6 of the CLI.
And then, when I run ng update @nrwl/schematics all it does is to update the package json, installing 6.1.0 of schematics and nx. But it doesn't create any nx.json file 😢
Nor does it restructure the libs folder - in nx6 I see that ng g library <my-lib-name> creates libs/<my-lib-name>/src/lib (so a lib folder was introduced, before v6 the files were directly in the src folder of the library). Plus, I see that now each lib has it's own karma and test config in it's folder.
Anyway, in the end I've spent 2 days doing a manual upgrade (created new nx workspace with v6, generated libs with same names - plus all the services/components etc. that I should have in those libs - and comparing the new workspace with the old one), I had to do a lot of changes manually, the app is working fine, also managed to make the tests work... but some libraries don't build, so I've failed and spent 2 days for nothing.

@vsavkin Any pointers on what would be the proper way to update/migrate a workspace from 0.6.19 to 6.1.0? I'm hoping there is a detailed guide somewhere I couldn't find, with all the hoops and errors one might encounter and how to overcome them. Because, right now, it seems that the only option I have left would be to actually start the project from scratch on nx6, and port the old code piece by piece. Which, in the end, is not that different from the manual upgrade I already did, just couldn't manage to also get the libs to build. Some of them, at least.

This what I've tried, before the manual upgrade (and before realizing that there should be an nx.json file):

npm i --save-dev @angular/cli@latest
ng update @angular/cli
ng update @angular/core
ng update @angular/material
migrated all rxjs code
ng update @ngrx/...
ng update @nrwl/schematics

Now, thinking that @nrwl/schematics probably shouldn't be the last update I do, I've quickly tried again, having it updated right after I do ng update @angular/cli, but it's the same - it doesn't create the nx.json file and it doesn't update existing libs, it doesn't create the karma config and tsconfig in each lib folder and so on.

[mcblum]

@MrCroft any chance you solved this? Having the same issue here. I think I upgraded in the wrong order, and now I have the old way of listing libs with Nx looking for .angular.json.

[NgxDev]

@mcblum unfortunately, no. I couldn't manage to do it through the update process.
ended up creating a new workspace, using the CLI to generate the structure to match (mostly for the libs) and then porting code to it (not all at once, of course :)).
wasn't easy, but I for one, had lost hope that it could be done through an upgrade process.

[Nxt3]

I ended up writing a bash script that created the existing libs and apps from scratch in a new workspace and then had it copy our existing code over. It was a pain.

[mcblum]

@Nxt3 any chance you'd share? we're stuck here. @vsavkin my apologies for the ping but is there a better way to fix what I can only imagine is a botched upgrade?

[Nxt3]

@mcblum Sure!

https://gist.github.com/Nxt3/e3964da5feb380fdbab801526ff1f2e3

So what this does is you create a new nrwl workspace somewhere. Run this script from inside that project. This script will:

1. Generate the apps specified into the dummy project
2. Copy the code from your existing app's src dir
3. Make inline text replacements (you need to determine if you want these as some were specific to my use case)
4. Deletes files I didn't want (like the per-project tslint.json file)
5. Copy the app back into your existing project
6. Repeats 1-5 for libs too

~/code/my_app/ is the existing project path.

~/code/nrwl-migration/ is the dummy project.

You'll need to change the paths. In hindsight, I should have made a constant at the top but oh well.

There are lots of inline text replacements that you may or may not need since my team has cucumber/gherkin feature tests that we were concerned with running. I'd like to think editing the script to fit your needs should be fairly straightforward though. Feel free to ask me any questions.

[FrozenPandaz]

Closing this issue as a lot of updates to the ng update migration have been made to make it more bullet proof. If it is still not working, please file a new issue with more recent context.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.