We can use ng generate component command to create component in sub-directory or specific folder.
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.
i.e. You want to create a component in a app/common
folder as shown in the image given below, then follow these steps
Open in Integrated Terminal
or Open in Command Prompt
.ng g c my-component
Also you can check this process through this image
Copy Relative Path
cd
, press space and then ctrl + v to paste the copied path and hit Enter
Also you can check this process through this image
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
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,
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),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With