Unable to create component in a different path using @nrwl/react

[cafesanu]

Please make sure you have read the submission guidelines before posting an issue

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

First of all, I'd like to thank you! I love to see that you are investing in react!!

Expected Behavior

When using ng generate component (via @nrwl/react schematics) with a path other than the default, the component should is created in a weird path.

Please describe the behavior you are expecting

ng generate component components/hello should create a component in the components directory. This is the default behavior for native Angular CLI if you want to create components or services in another path. The final result should look like this:

Additionally, when trying to run ng g c components/hello, the string components/hello is attached to the variables, looking like this:

import React from 'react';

import './components/hello.css';

/* tslint:disable:no-empty-interface */
export interface Components/helloProps {
}

export const Components/hello = (props: Components/helloProps) => {
  return (
    <div>
      <h1>Welcome to components/hello component!</h1>
      
    </div>
  );
};

export default Components/hello;

Current Behavior

What is the current behavior?

As mentioned above, components get created in the wrong path, and the path name is attached to variables

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. generate a react workspace
2. generate a component with other path via ng g c differentPath/componentName
3. ...

Context

Please provide any relevant information about your setup:

• Angular CLI version 8.1.1

A minimal reproduce scenario using allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.

Failure Logs

Please include any relevant log snippets or files here.

Other

[mehrad-rafigh]

I am trying to debug this, but I do not get how to start my new react component schematic. I ran yarn linknpm. @vsavkin Can you please point me in the right direction?
Basically I want to run the react component schematic, which I modified.

[jaysoo]

@cafesanu There seems to be a bug with not normalizing the component file name (which we can fix).

As for folder structure, we may want to move that to a separate --directory option.

So if you run nx g c header --directory components then we can generate the following:

apps
└── my-app
    ├── src
    │   ├── app
    │   │   └── components
    │   │       ├── header.css
    │   │       ├── header.spec.tsx
    │   │       └── header.tsx
    │   └── (...)
    └── (...)

[jaysoo]

@mehrad-rafigh I found it easier to run yarn e2e react (you don't have to let it run fully), and then playing with the generated workspace in tmp/nx/proj.

Or else you can yarn build and manually copy the build/packages/react folder over to your workspace's node_modules.

[cafesanu]

@jaysoo Thank you!
--directory option would be great!

Since this is a command that we would use a lot, could it have a short name and a shorthand?maybe --dir along with -d, or --path along with -p (if p and d do not exist of course)

Thanks again!

[cafesanu]

@cafesanu There seems to be a bug with not normalizing the component file name (which we can fix).

As for folder structure, we may want to move that to a separate --directory option.

So if you run nx g c header --directory components then we can generate the following:

apps
└── my-app
    ├── src
    │   ├── app
    │   │   └── components
    │   │       ├── header.css
    │   │       ├── header.spec.tsx
    │   │       └── header.tsx
    │   └── (...)
    └── (...)

would this also include nested directories? something like nx g c header --directory path/to/folder/?

[jaysoo]

@cafesanu

would this also include nested directories? something like nx g c header --directory path/to/folder/?

Yes! I'll make sure that works and remove any rough edges around the CLI.

[jaysoo]

Since this is a command that we would use a lot, could it have a short name and a shorthand?

Of course! We can use -d as an alias for --directory.

[jaysoo]

PR has been opened #1729.

Also adding an error message when you use slashes in component name.

e.g.

nx g c components/hello -p ui

results in an error

Found "/" in the component name. Did you mean to use the --directory option (e.g. `nx g c hello --directory components`)?

[samartomar]

whats solution?

[haseena-khader]

Below command works for me

nx g @nrwl/react:component test --directory=components/hello --project=frontend

components/hello will be generated inside the src component

[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.