26

I need to create ten Angular components like comp1, comp2, comp3, comp4, ..., comp10. So I need to execute same command for ten times for each component like ng g c comp1, ng g c comp2, etc.

Is there any option to generate multiple angular components using single angular-cli command like ng g c comp1, comp2, comp3.

ranjit redekar
  • 919
  • 1
  • 12
  • 24
  • 2
    Not supported by angular yet .. May be in future you might get this feature. – eduPeeth Jul 05 '18 at 06:59
  • 3
    created feature request for the same on github https://github.com/angular/angular/issues/24761, stay tuned for updates – Pardeep Jain Jul 05 '18 at 07:07
  • Once you create an empty component, you would write some code, test and validate it. And then keep on creating dependent components as per need. How/why would the need for some deterministic set of components ever arise – NitinSingh Jul 05 '18 at 07:14
  • Just write the loop on your shell? – Ingo Bürk Jul 05 '18 at 07:15
  • @NitinSingh agree with your point but at the starting of the application mostly needed common component skeletons like home, toolbar, footer or like signin, signup. – ranjit redekar Jul 05 '18 at 07:32
  • There are also 15 another optional flags (not including `name`) like `path`, `project`, `inlineStyle`, etc ..., that you can pass along with each component (see angular component schematics - https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/component/schema.json). How should we pass it differently for multiple components? – Andriy Jul 05 '18 at 08:12
  • @nitinSingh In my case it is because I need a separate component for each Ang Material tab in a tabgroup, and there are 10 of them. Much easier to create them all at once. – Rin and Len Jun 05 '19 at 09:55

5 Answers5

29

Well, there is nothing as of now by Angular CLI to create multiple components. But this can be done trivially in any shell.

Run this command into your bash shell -

for i in comp1 comp2; do ng g c "${i}"; done

Special thanks to Ingo Bürk's answer

Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
  • 5
    So you copied my exact answer from Github, even including the wording, and don't even mention it? – Ingo Bürk Jul 05 '18 at 20:48
  • @IngoBürk Yes, I already posted the link to the issue of GitHub you can check it out on comments of the question. Never mind I'll update in the answer as well :) – Pardeep Jain Jul 06 '18 at 05:32
6

Microsoft Windows variants

In root:

for %n in (component-name-1, component-name-2, ...) do ng g c %n

In module:

for %n in (component-name-1, component-name-2, ...) do ng g c module-name/%n

In module, without tests:

for %n in (component-name-1, component-name-2, ...) do ng g c module-name/%n --skipTests=true

Angular - ng generate

Windows CMD FOR command reference

urusai_na
  • 393
  • 4
  • 11
6

If you don't want to create a script here is one hack that can work

  1. Open Your Notepad or any text editor
  2. Write the component name with syntax like this:
  ng g c components/contact 
  ng g c components/login 
  ng g c components/signup 
  ng g c components/dashboard
  1. Copy Above and Paste in your CLI (i used Git bash). It will execute all one by one without any hectic. you can also add parameters specific to components
devXd
  • 177
  • 3
  • 4
1

I just created a bash script as

createcomponent.sh

with the following small piece of code

#!/bin/bash
while [ "$1" != "" ]; do
    npx ng g c "components/$1"
    shift
done

then just call it as

 createcomponent.sh comp1 comp2 comp3 ...

The same thing can be done using .bat as well if someone using Windows. npx keyword is not needed if globally installed angular is used

MOHAMMAD WASEEM
  • 185
  • 1
  • 6
0
@echo off
setlocal enabledelayedexpansion

for %%x in (%*) do (
   ng g c %%x
)

You can store this file e.g. named as comps in any folder which is a part of path system variable, or you may create your own folder and put the file there and add the path of that folder to path variable.

Then continue using this simple script with comps header footer list etc. it will loop through all the arguments and make the components, one more benefit of this will be that you will be able to use this comps command globally.

Caveat: This will only generate the components in root module, if you want to generate in other modules, you need to tweak this script to accept the module name also

Lint
  • 895
  • 3
  • 13
  • 32