Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to generate components in a specific folder with Angular CLI?

People also ask

Does Ng generate component create folder?

We can use ng generate component command to create component in sub-directory or specific folder.

What is the CLI command to create a component in Angular?

To create a component using the Angular CLI: From a terminal window, navigate to the directory containing your application. Run the ng generate component <component-name> command, where <component-name> is the name of your new component.


The ng g component plainsight/some-name makes a new directory when we use it.

The final output will be:

plainsight/some-name/some-name.component.ts

To avoid that, make use of the flat option ng g component plainsight/some-name --flat and it will generate the files without making a new folder

plainsight/some-name.component.ts

There are couple of methods to create component in a specific directory.

Method 1: "Open in Integrated Terminal" - Quick, Simple and Error free method

i.e. You want to create a component in a app/common folder as shown in the image given below, then follow these steps

  1. Right click on the folder in which you want to create component.
  2. Select option Open in Integrated Terminal or Open in Command Prompt.
  3. In new terminal (you'll see your selected path), then type ng g c my-component

Also you can check this process through this image enter image description here

Method 2: "Copy Relative Path" and Paste on Terminal

  1. Right click on folder in which you want to create component
  2. From context menu, select Copy Relative Path
  3. On termincal, type cd, press space and then ctrl + v to paste the copied path and hit Enter
  4. You will see that directory has been changed.

Also you can check this process through this image enter image description here

Method 3: Type complete path on terminal

i.e. You want to create component in some folder, you type the whole command including path and component name.

ng g c relative-path/my-component

Also you can check this process through this image enter image description here

Note (method-3): angular will not allow you to create component outside app folder so for component, your base path will be app that's why in my case I had to start with auth/a-component instead of src/app/auth/a-component


ng g c component-name

For specify custom location: ng g c specific-folder/component-name

here component-name will be created inside specific-folder.

Similarl approach can be used for generating other components like directive, pipe, service, class, guard, interface, enum, module, etc.


more shorter code to generate component: ng g c component-name
to specify its location: ng g c specific-folder/component-name


Additional info
more shorter code to generate directive: ng g d directive-name
to specify its location: ng g d specific-folder/directive-name


The above options were not working for me because unlike creating a directory or file in the terminal, when the CLI generates a component, it adds the path src/app by default to the path you enter.

If I generate the component from my main app folder like so (WRONG WAY)

ng g c ./src/app/child/grandchild 

the component that was generated was this:

src/app/src/app/child/grandchild.component.ts

so I only had to type

ng g c child/grandchild 

Hopefully this helps someone


It Super Easy,

enter image description here

Other way,

in terminal go your FOLDER,

**xxx\FOLDER_NAME>cd FOLDER_NAME

xxx\FOLDER_NAME> ng generate component plainsight

Bonus point if you lasy like me to copy path(Visual studio code),

enter image description here