Nx generate @nrwl/angular stories cause Error: Could not read TS file, when component is imported using relative path

hviagov commented 2 years ago

Current Behavior

Trying to generate stories for app components is landing into error like this one:

Error: ENOENT: no such file or directory, open '/home/froggy/development/Projects/Playground/frogile/apps/frog-party/src/app/features/policy/app/features/policy/policy.component.ts'
    at Object.openSync (node:fs:585:3)
    at readFileSync (node:fs:453:35)
    at FsTree.fsReadFile (/home/froggy/development/Projects/Playground/frogile/node_modules/nx/src/generators/tree.js:192:44)
    at FsTree.read (/home/froggy/development/Projects/Playground/frogile/node_modules/nx/src/generators/tree.js:22:32)
    at getTsSourceFile (/home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/utils/nx-devkit/ast-utils.js:417:25)
    at getInputPropertyDeclarations (/home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/generators/utils/storybook.js:8:50)
    at getComponentProps (/home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/generators/utils/storybook.js:16:19)
    at componentStoryGenerator (/home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/generators/component-story/component-story.js:15:53)
    at /home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/generators/stories/stories.js:25:39
    at Array.forEach (<anonymous>)
Could not read TS file (apps/frog-party/src/app/features/policy/app/features/policy/policy.component.ts).
Error: Could not read TS file (apps/frog-party/src/app/features/policy/app/features/policy/policy.component.ts).
    at getTsSourceFile (/home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/utils/nx-devkit/ast-utils.js:419:15)
    at getInputPropertyDeclarations (/home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/generators/utils/storybook.js:8:50)
    at getComponentProps (/home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/generators/utils/storybook.js:16:19)
    at componentStoryGenerator (/home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/generators/component-story/component-story.js:15:53)
    at /home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/generators/stories/stories.js:25:39
    at Array.forEach (<anonymous>)
    at angularStoriesGenerator (/home/froggy/development/Projects/Playground/frogile/node_modules/@nrwl/angular/src/generators/stories/stories.js:21:20)
    at Object.<anonymous> (/home/froggy/development/Projects/Playground/frogile/node_modules/nx/src/command-line/generate.js:130:36)
    at Generator.next (<anonymous>)
    at fulfilled (/home/froggy/development/Projects/Playground/frogile/node_modules/tslib/tslib.js:114:62)

Here is my module declaration

import { NgModule } from '@angular/core';
import { PolicySliderComponent } from 'app/features/policy/elements/policy-slider/policy-slider.component';
import { PolicyCheckboxComponent } from 'app/features/policy/elements/policy-checkbox/policy-checkbox.component';
import { PolicyComponent } from 'app/features/policy/policy.component';
import { PolicyPopupComponent } from 'app/features/policy/elements/policy-popup/policy-popup.component';
import { SharedModule } from 'app/shared/shared.module';

@NgModule({
  imports: [SharedModule],
  declarations: [PolicyComponent, PolicyPopupComponent, PolicySliderComponent, PolicyCheckboxComponent],
  exports: [PolicyComponent, PolicyPopupComponent, PolicySliderComponent, PolicyCheckboxComponent],
})
export class PolicyModule {}

and app tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
    {
      "path": "./tsconfig.editor.json"
    },
    {
      "path": "./.storybook/tsconfig.json"
    }
  ],
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "noImplicitOverride": false,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "strict": false,
    "strictPropertyInitialization": false,
    "strictNullChecks": false,
    "noPropertyAccessFromIndexSignature": false,
    "useUnknownInCatchVariables": false,
    "noFallthroughCasesInSwitch": false,
    "downlevelIteration": true,
    "lib": ["es2018", "dom", "es2019", "es2020"],
    "paths": {
      "app/*": ["apps/frog-party/src/app/*"],
      "test/*": ["apps/frog-party/src/test/*"],
      "environments/*": ["apps/frog-party/src/environments/*"]
    },
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Expected Behavior

Generating stories for single components persisting imports using path aliases

Steps to Reproduce

Assign path aliases in app's tsconfig.json and then import the component in the corresponding module using this alias

Failure Logs

See above

Environment

NodeJs: 16.4.2LTS Nx: 14.1.6 Angular: 13.2.2 OS: Linux 5.4.0-110-generic #124-Ubuntu SMP Thu Apr 14 19:46:19 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux

Coly010 commented 2 years ago

Hey @hviagov ! Thanks for reporting this issue!

Taking a quick over your declarations:

import { NgModule } from '@angular/core';
import { PolicySliderComponent } from 'app/features/policy/elements/policy-slider/policy-slider.component';
import { PolicyCheckboxComponent } from 'app/features/policy/elements/policy-checkbox/policy-checkbox.component';
import { PolicyComponent } from 'app/features/policy/policy.component';
import { PolicyPopupComponent } from 'app/features/policy/elements/policy-popup/policy-popup.component';
import { SharedModule } from 'app/shared/shared.module';

@NgModule({
  imports: [SharedModule],
  declarations: [PolicyComponent, PolicyPopupComponent, PolicySliderComponent, PolicyCheckboxComponent],
  exports: [PolicyComponent, PolicyPopupComponent, PolicySliderComponent, PolicyCheckboxComponent],
})
export class PolicyModule {}

These import paths seem to be incorrect, in particular, this syntax:

'app/features/policy/elements/policy-checkbox/policy-checkbox.component'

I know this is an alias to the root of the app, but this will conflict with many things, not just the generators.

It would be better to use relative import paths within the apps/<app-name> folders.

If you're worried then about managing relative import paths (which can get messy), then it would make sense to extract these features (such as policy) into its own workspace library in Nx.

This would mean you could refactor your import to:

import { PolicySliderComponent,  PolicyCheckboxComponent,  PolicyComponent,  PolicyPopupComponent } from '@frogile/policy';

Ignoring this, if you could try change your imports in your app to use relative imports, then attempt to run the generator again, can you check if you have any further success?

github-actions[bot] commented 2 years ago

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! 🙏

Coly010 commented 2 years ago

I'm going to close this as there has been no updates in quite some time.

If anything changes, I'll readdress this.

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