jsverse/transloco

Bug(scope): ng-add cannot read properties of undefined

Closed this issue · 10 comments

skatterwe commented

Is there an existing issue for this?

  • I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Schematics

Is this a regression?

Yes

Current behavior

I've created a fresh of the press empty nx angular project, trying to create a github repo to reproduce the jest test running issues for structural directives.

The first issue I came across was, running the installation script does not work.

nx g @jsverse/transloco:ng-add is not running.

 NX   Unable to resolve @jsverse/transloco:ng-add.

Cannot find module '@jsverse/transloco/package.json'
Require stack:
- /.../transloco-test/node_modules/nx/src/utils/package-json.js
- /.../transloco-test/node_modules/nx/src/project-graph/plugins/loader.js
- /.../transloco-test/node_modules/nx/src/project-graph/plugins/index.js
- /.../transloco-test/node_modules/nx/src/command-line/run/executor-utils.js
- /.../transloco-test/node_modules/nx/src/devkit-internals.js
- /.../transloco-test/node_modules/nx/src/utils/assert-workspace-validity.js
- /.../transloco-test/node_modules/nx/src/project-graph/build-project-graph.js
- /.../transloco-test/node_modules/nx/src/project-graph/project-graph.js
- /.../transloco-test/node_modules/nx/src/project-graph/file-utils.js
- /.../transloco-test/node_modules/nx/src/utils/package-manager.js
- /.../transloco-test/node_modules/nx/src/utils/child-process.js
- /.../transloco-test/node_modules/nx/src/command-line/migrate/command-object.js
- /.../transloco-test/node_modules/nx/src/command-line/nx-commands.js
- /.../transloco-test/node_modules/nx/bin/init-local.js
- /.../transloco-test/node_modules/nx/bin/nx.js
Pass --verbose to see the stacktrace.

By the looks of it, I had to run npm i first manually before I can even do the add, which is not apparent from the documentation. If that is the required approach please update the documentation.

After doing that, I was able to start the schematic, but this failed immediately with the error cannot read properties of undefined

stephaniekatterwe@Stephanies-MBP transloco-test % npm run ng -- g @jsverse/transloco:ng-add

> @transloco-test/source@0.0.0 ng
> nx g @jsverse/transloco:ng-add


 NX  Generating @jsverse/transloco:ng-add

✔ 🌍 Which languages do you need? · en, de
✔ 🚀 Are you working with server side rendering? (y/N) · false
TypeError: Cannot read properties of undefined (reading 'sourceRoot')
    at /Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/@jsverse/transloco/schematics/src/ng-add/index.js:38:36
    at callRuleAsync (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/@angular-devkit/schematics/src/rules/call.js:77:24)
    at /Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/@angular-devkit/schematics/src/rules/call.js:73:40
    at Observable._subscribe (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/observable/defer.js:8:31)
    at Observable._trySubscribe (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/Observable.js:41:25)
    at /Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/Observable.js:35:31
    at Object.errorContext (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/util/errorContext.js:22:9)
    at Observable.subscribe (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/Observable.js:26:24)
    at /Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/operators/map.js:9:16
    at OperatorSubscriber.<anonymous> (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/util/lift.js:14:28)

 NX   Cannot read properties of undefined (reading 'sourceRoot')

Pass --verbose to see the stacktrace.

Expected behavior

Installation script works

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

https://github.com/skatterwe/transloco-test

Transloco Config

No response

Please provide the environment you discovered this bug in

Transloco: ^7.4.3
Angular: ~18.1.0
Node: v20.15.1
Package Manager: npm
OS: MacOS 14.5

Browser

No response

Additional context

Previous issue I've found: #729.

If you guide me to the correct parts I'm also open to help fix the issue. I've chosen no on the question below though, because I don't have a PR already available.

I would like to make a pull request for this bug

No

shaharkazaz commented

@skatterwe I'll clarify the docs, you first need to install the package.
Tested on a fresh nx workspace.

skatterwe commented

@shaharkazaz thanks. Did you also encounter the second issue, that after the install was done the add script still failed?

shaharkazaz commented

@skatterwe This is what I ran:

npx create-nx-workspace (created a standalone angular project)
npm i @jsverse/transloco
nx g @jsverse/transloco:ng-add

Everything seemed to work as expected
image

shaharkazaz commented

Did you run anything differently?

EugeneHerasymchuk commented

this is a fix for a second TypeError: Cannot read properties of undefined (reading 'sourceRoot')
#294 (comment)

skatterwe commented

I did this:

stephaniekatterwe@Stephanies-MBP transloco-test % npm run ng -- g @jsverse/transloco:ng-add

> @transloco-test/source@0.0.0 ng
> nx g @jsverse/transloco:ng-add


 NX  Generating @jsverse/transloco:ng-add

✔ 🌍 Which languages do you need? · en, de
✔ 🚀 Are you working with server side rendering? (y/N) · false
TypeError: Cannot read properties of undefined (reading 'sourceRoot')
    at /Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/@jsverse/transloco/schematics/src/ng-add/index.js:38:36
    at callRuleAsync (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/@angular-devkit/schematics/src/rules/call.js:77:24)
    at /Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/@angular-devkit/schematics/src/rules/call.js:73:40
    at Observable._subscribe (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/observable/defer.js:8:31)
    at Observable._trySubscribe (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/Observable.js:41:25)
    at /Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/Observable.js:35:31
    at Object.errorContext (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/util/errorContext.js:22:9)
    at Observable.subscribe (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/Observable.js:26:24)
    at /Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/operators/map.js:9:16
    at OperatorSubscriber.<anonymous> (/Users/stephaniekatterwe/Projects/DHL/LEARNING/transloco-test/node_modules/rxjs/dist/cjs/internal/util/lift.js:14:28)

 NX   Cannot read properties of undefined (reading 'sourceRoot')

Pass --verbose to see the stacktrace.
skatterwe commented

Looks like the only difference is, I was not using the default languages but "en, de" and used the .bin of nx from ./node_modules not a globally installed version.

@shaharkazaz

EugeneHerasymchuk commented

but from the link above with the fix - you will need to specify a specific project ( because I suppose that you have more than 1 project )

so ng add @ngneat/transloco --project={your-project-name} and you miss --project part in the example that you provide

skatterwe commented

I have on app and one lib. Ok if only the project was missing, a proper error message might be good?

  • 👍1
shaharkazaz commented

@skatterwe If that's the case you are correct, it should be handled better.
Would you like to PR an improvement there? 🙂