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

Question

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?

ng generate component your/path/from/the/app/folder/plainsight — maxime1992, Oct 20 '17 at 14:33
To have a nice result when you first run something like: `ng generate component plainsight` as a parent and now you want to generate a child then just run: `ng generate component plainsight/child` — Martin Zamora, Oct 14 '20 at 03:50
A handy tool I use is -d at the end of the command, which will do a dry run i.e. not actually add the files to your project, only show you where they would go. That way you can check that they are going into the desired folder: ```ng generate component path/to/folder/plainsight -d``` — Juan Pablo, Feb 23 '21 at 23:44

score 286 · Answer 1 · edited Jul 10 '18 at 08:27

286

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

edited Jul 10 '18 at 08:27

SwissCoder

2,514
4
28
40

answered Jan 19 '18 at 21:25

user3611927

2,869
1
11
2

21

the --flat option is what I was looking for! – mishap Sep 28 '18 at 16:45
1

@user3611927 --flat is the answer as will use existing folders and only make folders that dont exist. Perfect!! This should be the default behavious IMHO – Andrew Day Nov 23 '18 at 15:30
3

`--flat` is actually enabled by default, so there's no need to explicitly type it. If we want the generated file(s) to be placed inside a folder, generate with `--flat false`. – Christian Mar 11 '22 at 00:18

WasiF · Answer 2 · 2023-07-14T14:01:53.813

165

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

Right click on the folder in which you want to create component.
Select option Open in Integrated Terminal or Open in Command Prompt.
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

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

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

Also you can check this process through this image

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

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

edited Jul 14 '23 at 14:01

answered Aug 15 '18 at 10:04

WasiF

26,101
16
120
128

11

You are a genius or I'm just fokin stoopid... Best way ever! – Ap0st0l Jun 05 '20 at 08:29
This will open up in a new terminal – Prageeth godage Dec 06 '20 at 02:39
1

This is the best solution. Thank you! – Gobind Jun 10 '21 at 10:19
1

This is the best, absolutly – Leandro Castro Jun 24 '21 at 15:32
Methods 1 and 2 are ignoring my working directory and creating it in the root – xr280xr May 04 '23 at 17:15
@xr280xr Its impossible. They should work. You must have making some mistake. – WasiF May 05 '23 at 15:46
this is the kinda explanation I needed – The Godfather Jul 13 '23 at 08:21

score 34 · Answer 3 · edited Sep 11 '18 at 19:26

34

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.

edited Sep 11 '18 at 19:26

Vikram Deshmukh

12,304
4
36
38

answered Apr 10 '18 at 06:06

VIKAS KOHLI

8,164
4
50
61

score 19 · Answer 4 · answered Feb 18 '18 at 17:33

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

score 14 · Answer 5 · answered Jan 14 '20 at 15:28

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

score 11 · Answer 6 · answered Dec 17 '20 at 14:03

11

Use 'ng generate component ./target_directory/Component_Name'

answered Dec 17 '20 at 14:03

Matthew

179
1
6

It works, thanks a lot! – André Luiz Myszko Feb 08 '22 at 01:18

Prageeth godage · Answer 7 · 2020-12-06T02:36:31.987

10

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

edited Dec 06 '20 at 02:36

answered Dec 06 '20 at 02:31

Prageeth godage

4,054
3
29
45

score 7 · Answer 8 · edited Nov 04 '20 at 19:57

7

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

edited Nov 04 '20 at 19:57

Aaron Bell

852
2
11
26

answered Nov 04 '20 at 15:07

Seshu Vuggina

725
1
8
16

We can use - ng g c modules/moduleName/IfComponentsFolder/ComponentYouWantToCreate --project parentProjectName – sid7747 Aug 06 '21 at 15:07

score 6 · Answer 9 · edited Jan 11 '19 at 00:25

6

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

edited Jan 11 '19 at 00:25

Simply Ged

8,250
11
32
40

answered Jan 10 '19 at 20:04

SACHIN DUHAN

340
4
10

score 5 · Answer 10 · answered Feb 21 '19 at 21:11

5

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

answered Feb 21 '19 at 21:11

esitarz

386
4
6

score 5 · Answer 11 · edited Nov 05 '20 at 01:02

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

Check for the particular component where you need to generate the new component.
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.

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

Panagiotis Bougioukos · Answer 12 · 2021-06-04T17:58:31.107

4

2021 Further speed up using IDE pluggins

If you want to further speed up this usual process and avoid common mistakes which cost you time you can try with visual studio code plugins.

For example I use Angular-Schematics and I avoid the terminal. You can invoke the ng cli with your mouse selections.

edited Jun 04 '21 at 17:58

answered Jun 04 '21 at 17:20

Panagiotis Bougioukos

15,955
2
30
47

score 3 · Answer 13 · answered Oct 21 '19 at 12:07

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.

ng g c comp-name or ng generate component comp-name to create a component with the name 'comp-name'
ng g s serv-name or ng generate service serv-name to create a service with the name 'serv-name'
ng g m mod-name or ng generate module mod-name to create a module with the name 'mod-name'
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!

score 3 · Answer 14 · edited Jun 20 '20 at 09:12

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

score 2 · Answer 15 · answered Aug 20 '21 at 06:00

2

Open the specific folder Terminal use this command

ng g c component name --flat

answered Aug 20 '21 at 06:00

Junaid khan

142
1
3

score 2 · Answer 16 · answered Jan 23 '23 at 07:45

Open a terminal window and navigate to the root of your Angular project. create a folder

Run the following command to generate a new component in a specific folder:

ng generate component <folderName>/<componentName>

For example, if you want to create a new component called "myComponent" in a folder called "components", the command would be:

ng generate component components/myComponent

score 1 · Answer 17 · answered Dec 19 '18 at 09:24

1

Simple

ng g component plainsight/some-name

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

answered Dec 19 '18 at 09:24

Ahmed Adewale

2,943
23
19

score 1 · Answer 18 · answered Jan 17 '19 at 15:16

1

Try to use

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

Or try it manually, if you feel more comfortable.

answered Jan 17 '19 at 15:16

Erich Benevides Diniz

11
2

Brahmmeswara Rao Palepu · Answer 19 · 2019-07-15T15:41:00.817

1

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

Run cmd : ng g c componentname

edited Jul 15 '19 at 15:41

answered Jan 21 '19 at 07:35

Brahmmeswara Rao Palepu

189
1
5

Brian Akumah · Answer 20 · 2022-08-30T17:24:57.913

1

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

the g c means generate component

edited Aug 30 '22 at 17:24

answered Apr 18 '19 at 18:53

Brian Akumah

144
3
12

1

I get following error with Angular 9 "Unknown option: '--spec'" – Vikram Jain Sep 07 '20 at 05:03
dont ignore spec files.. Tests are there for a reason. – Pogrindis Mar 19 '21 at 21:27

score 0 · Answer 21 · answered Dec 24 '19 at 11:25

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

score 0 · Answer 22 · edited Jun 20 '20 at 09:12

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.

score 0 · Answer 23 · answered Jun 05 '22 at 05:44

Say you want to create a component Container in a module Box, and module is already created and is present in it its own folder src/app/box.

You can do this - when asked for component name, provide path to component and component name.

ng g c -m box
? What name would you like to use for the component? box/Container
CREATE src/app/box/container/container.component.scss (0 bytes)
CREATE src/app/box/container/container.component.html (24 bytes)
CREATE src/app/box/container/container.component.spec.ts (647 bytes)
CREATE src/app/box/container/container.component.ts (288 bytes)
UPDATE src/app/box/box.module.ts (286 bytes)

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

23 Answers23

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

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

Method 3: Type complete path on terminal

2021 Further speed up using IDE pluggins

Firstly to create a Component you need to use:-

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

Linked

Related