How to generate components in a specific folder with Angular CLI?
AngularTypescriptAngular CliAngular Problem Overview
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?
Angular Solutions
Solution 1 - Angular
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
Solution 2 - Angular
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
Solution 3 - Angular
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.
Solution 4 - Angular
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
Solution 5 - Angular
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
Solution 6 - Angular
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),
Solution 7 - Angular
Use 'ng generate component ./target_directory/Component_Name'
Solution 8 - Angular
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
Solution 9 - Angular
ng g c folderName/SubFolder/.../componentName --spec=false
Solution 10 - Angular
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.)
Solution 11 - Angular
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
Solution 12 - Angular
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
orng generate component comp-name
to create a component with the name 'comp-name'ng g s serv-name
orng generate service serv-name
to create a service with the name 'serv-name'ng g m mod-name
orng generate module mod-name
to create a module with the name 'mod-name'ng g m mod-name --routing
orng generate module mod-name --routing
to create a module with the name 'mod-name' with angular routing
Hope this helps!
Good Luck!
Solution 13 - Angular
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
Solution 14 - Angular
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.
Solution 15 - Angular
Open the specific folder Terminal use this command
ng g c component name --flat
Solution 16 - Angular
Simple
ng g component plainsight/some-name
It will create "plainsight" folder and generate some-name component inside it.
Solution 17 - Angular
Try to use
ng g component plainsight/some-name.component.ts
Or try it manually, if you feel more comfortable.
Solution 18 - Angular
Solution 19 - Angular
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
Solution 20 - Angular
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
Solution 21 - Angular
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.