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

I am using Angular 4 with Angular CLI and I am able to create a new component with the following command.

E:\HiddenWords>ng generate component plainsight

But I need to generate a child component inside plainsight. Is there a way to do it with Angular CLI?

It Super Easy,

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),

Create a component inside a specific folder:

ng g c folder-name/component-name

Create a component inside a folder for a specific (existing) module with Angular-CLI:

ng g c folder-name/component-name --module=folder-name/moduleName.module.ts

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

If you use VSCode, consider using the Angular Console

It provides an interface for the Angular CLI. You will see an option to specify the path.

The Angular CLI is immensely powerful and extensible. In fact, there are so many capabilities that it is helpful for developers to have all of the different configuration options for every command available to them.

With Angular Console, you’ll get recommendations and be able to pull up even the most easily forgotten or rarely used features!

Angular Console is, first and foremost, a more productive way to work with what the Angular CLI provides.

Use 'ng generate component ./target_directory/Component_Name'

Once you are in the directory of your project. use cd path/to/directory then use ng g c component_name --spec=false it automates everything and is error free

the g c means generate component

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

Need for using --dryRun when using custom directory

You can pass your custom directory path along with ng command.

ng g c myfolder\mycomponent

But there are chances that you miss spell the path and either new folder gets created or target directory changes. For this reason dryRun is very helpful. It displays an output of how the changes is going to be affected.

After verifying the result you can run the same command without -d to make the changes.

--dryRun=true|false

When true, runs through and reports activity without writing out results.

Default: false

Aliases: -d

Official Doc :- https://angular.io/cli/generate

I wasn't having any luck with the above answers (including --flat), but what worked for me was:

cd path/to/specific/directory

From there, I ran the ng g c mynewcomponent

Simple

ng g component plainsight/some-name

It will create "plainsight" folder and generate some-name component inside it.

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

Angular CLI provides all the commands you need in your app development. For your specific requirement, you can easily use ng g (ng generate) to get the work done.

ng g c directory/component-name will generate component-name component in the directory folder.

Following is a map of a few simple commands you can use in your application.

1. ng g c comp-name or ng generate component comp-name to create a component with the name 'comp-name'
2. ng g s serv-name or ng generate service serv-name to create a service with the name 'serv-name'
3. ng g m mod-name or ng generate module mod-name to create a module with the name 'mod-name'
4. ng g m mod-name --routing or ng generate module mod-name --routing to create a module with the name 'mod-name' with angular routing

Hope this helps!

Good Luck!

Go to project folder in command prompt or in Project Terminal.

Run cmd : ng g c componentname

Firstly to create a Component you need to use:-

• ng g c componentname

  By using above command New Component will be created in a folder with
  (componentname) you specified above.

But if you need to create a component inside of another component or in specific folder:-

• ng g c componentname/newComponentName

To open a terminal in VS code just type CTRL + ~ which will open the terminal. Here are the steps:

1. Check for the particular component where you need to generate the new component.

2. Redirect the path to the particular folder/component where you need to generate another component

FOR EXAMPLE: cd src/app/particularComponent

In the place of particularComponent, type the component name in which you need to generate the new component.

3. Once you are in the component where you need to generate the new component, just type this command: ng g c NewComponentName

(Change the name NewComponentName to your required component name.)

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

ng g c folderName/SubFolder/.../componentName --spec=false 

Try to use

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

Or try it manually, if you feel more comfortable.

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.