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