Error running `ng g @nrwl/angular:storybook-configuration <library-name>`

nayfin commented 3 years ago

Current Behavior

I just finished running migrations to update NX to 10.2.1 from NX 9 Then I tried to run the storybook-configuration schematic: ng g @nrwl/angular:storybook-configuration <library-name> I am able to step through interactive portion of CLI, answering y to all questions Immediately throws error: Invalid JSON character: " " at 11:5.

nx-storybook-error

Expected Behavior

I would expect the storybook-configuration schematic to complete

Steps to Reproduce

I'm not sure what could be causing this. If someone with insight into the schematic has an idea what could be causing error. Some help would be appreciated. I've checked the 11th line of every file with .json extension, but I don't see anything that would be causing...

Note:

I did upgrade Angular to v10 before Nx 10 was available. So I'm guessing I shot myself in the foot here, as it looks like there have been issues with the way Angular handles tsconfig vs the way Nx does. Lesson learned, I'll be more patient next time.

During migration I noticed this warning as well: Could not update libs/<library-name>/tsconfig.lib.json: Invalid JSON nx-invalid-json

I don't see anything in file, that looks out of place. I can post as new issue if you think that would be appropriate. It seems like there could be some overlap in the issues here so I noted it.

Failure Logs

Invalid JSON character: " " at 11:5.

Environment

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

nayfin commented 3 years ago

I tried rerunning migrations from nx 9.5 to 10.0.0 then running: ng g @nrwl/angular:storybook-configuration <library-name> now I get error: project_type_1.projectDir is not a function after answering CLI questions nx-10 0-storybook-error

After migrating to nx 10.1 error changes to

Invalid JSON character: " " at 11:5.

FrozenPandaz commented 3 years ago

Hi @nayfin,

Can you please provide the version of @nrwl/storybook that you have installed please? Please make sure that it is aligned with the other @nrwl/* packages please.

nayfin commented 3 years ago

It looks like everything is in line. Here are depenencies:

"dependencies": {
    "@angular/animations": "10.1.3",
    "@angular/cdk": "^10.0.1",
    "@angular/common": "10.1.3",
    "@angular/compiler": "10.1.3",
    "@angular/core": "10.1.3",
    "@angular/fire": "^6.0.0",
    "@angular/flex-layout": "^9.0.0-beta.30",
    "@angular/forms": "10.1.3",
    "@angular/material": "^10.0.1",
    "@angular/material-moment-adapter": "^10.0.1",
    "@angular/platform-browser": "10.1.3",
    "@angular/platform-browser-dynamic": "10.1.3",
    "@angular/router": "10.1.3",
    "@nestjs/common": "7.0.0",
    "@nestjs/core": "7.0.0",
    "@nestjs/platform-express": "7.0.0",
    "@nrwl/angular": "10.3.0",
    "@nrwl/schematics": "^8.12.11",
    "algoliasearch-helper": "^3.1.1",
    "angular-instantsearch": "^2.3.0",
    "core-js": "^3.6.5",
    "firebase": "7.14.3",
    "global": "^4.4.0",
    "hammerjs": "^2.0.8",
    "interactjs": "~1.9.19",
    "lodash-es": "^4.17.10",
    "reflect-metadata": "^0.1.12",
    "rxjs": "6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "0.1001.4",
    "@angular-devkit/build-angular": "0.1001.4",
    "@angular-devkit/build-ng-packagr": "0.1001.4",
    "@angular/cli": "10.1.4",
    "@angular/compiler-cli": "10.1.3",
    "@angular/language-service": "10.1.3",
    "@nestjs/schematics": "7.0.0",
    "@nestjs/testing": "7.0.0",
    "@nrwl/cypress": "10.3.0",
    "@nrwl/jest": "10.3.0",
    "@nrwl/nest": "10.3.0",
    "@nrwl/node": "10.3.0",
    "@nrwl/storybook": "^10.3.0",
    "@nrwl/workspace": "10.3.0",
    "@types/jest": "26.0.8",
    "@types/node": "~13.13.5",
    "codelyzer": "~5.2.2",
    "cypress": "4.5.0",
    "dotenv": "8.2.0",
    "eslint": "7.10.0",
    "firebase-tools": "^8.2.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^7.1.0",
    "inquirer-autocomplete-prompt": "^1.0.2",
    "jest": "26.2.2",
    "jest-preset-angular": "8.3.1",
    "ng-packagr": "^10.0.0",
    "prettier": "2.0.4",
    "ts-jest": "26.4.0",
    "ts-node": "~8.10.1",
    "tsickle": "^0.38.1",
    "tslint": "~6.1.0",
    "typescript": "4.0.3"
  }

Thank you for the quick response!

nayfin commented 3 years ago

It seems this is due to upgrading to Angular 10 before Nx 10 was released, then running migration script. It seems the angular update schematics created some issues with the migration, as I had other issues creep in as well. So, I created a fresh Nx workspace and migrated each project over manually. Took less than an hour and all my issues are now resolved. If the nrwl team is still interested in figuring this out I'm happy to keep it open and work with you, otherwise I can close it as bug created by an impatient user not following migration protocol.

juristr commented 3 years ago

Glad you resolved the issues.

It seems this is due to upgrading to Angular 10 before Nx 10 was released

Yeah, we usually suggest to upgrade Nx which will then take care of upgrading the according Angular version as well. What we've been doing atm, is to wait for the Angular release, then test Nx against it and make sure everything works properly, and then release an Nx version.

When you run nx migrate @nrwl/workspace@latest it will also take care of upgrading Angular and running the according migrations if necessary 😃 .

github-actions[bot] commented 1 year ago

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.

nrwl / nx