How to create components inside a specific folder with Angular 9 CLI ? ..

This tutorial guides you on how to create components inside a specific folder with Angular 9 CLI.

Create components inside a specific folder with Angular 9 CLI

The following command will generate all classes for your new component including .spect.ts test files.

Generate new component and its classes

ng generate component <component-name> [options]

(OR)

ng g c <component-name> [options]

Let’s say your current project structure looks like below. Where you have recipes component and its classes. Note, I have skipped .spec.ts test file generation. To skip .spec.ts test files you just need to pass option “–skipTests true”

📂src
| — 📂 app
| — | — 📂 recipes
| — | — | — 📜 recipes.component.html
| — | — | — 📜 recipes.component.ts
| — | — | — 📜 recipes.component.css
| — | — 📂 app.component.html
| — | — 📂 app.component.ts
| — | — 📂 app.component.css
| — | — 📂 app.component.spec.ts

Now, you wanted to generate new components recipe-detail, recipe list inside recipes folder and recipe-item component inside recipe-list folder as shown below.

📂src
| — 📂 app
| — | — 📂 recipes
| — | — | — 📂 recipe-detail
| — | — | — | — 📜 recipe-detail.component.html
| — | — | — | — 📜 recipe-detail.component.ts
| — | — | — | — 📜 recipe-detail.component.css
| — | — | — 📂 recipe-list
| — | — | — | — 📂 recipe-item
| — | — | — | — | — 📜 recipe-item.component.html
| — | — | — | — | — 📜 recipe-item.component.ts
| — | — | — | — | — 📜 recipe-item.component.css
| — | — | — | — 📜 recipe-list.component.html
| — | — | — | — 📜 recipe-list.component.ts
| — | — | — | — 📜 recipe-list.component.css
| — | — | — 📜 recipes.component.html
| — | — | — 📜 recipes.component.ts
| — | — | — 📜 recipes.component.css
| — | — 📂 app.component.html
| — | — 📂 app.component.ts
| — | — 📂 app.component.css
| — | — 📂 app.component.spec.ts

Before Angular 9 version you need to follow the below steps to create components inside a specific folder.

First, you need to generate a module or component using the command ng g module <module-name> or ng g component<component-name>
Change directory in to the new module or new component folder cd <module-name> or cd <component-name>
Finally, create component as a child of that parent module or component using command ng g component <component-name>

Angular 9: Create components inside a specific folder

After Angular 9 you are not required to change directory in order to create components inside a specific folder. You just need to follow below steps.

Let’s say you have created recipes component (current project structure).
To create components just use the path information in the angular CLI command as shown below. For example, ng g c <module-name or component-name>/ <new-component-name> .

The following angular CLI commands creates new components recipe-detail, recipe list inside recipes folder and recipe-item component inside recipe-list folder as shown below.

> ng g c recipes/recipe-detail --skipTests true

CREATE src/app/recipes/recipe-detail/recipe-detail.component.html (28 bytes)
CREATE src/app/recipes/recipe-detail/recipe-detail.component.ts (302 bytes)
CREATE src/app/recipes/recipe-detail/recipe-detail.component.css (0 bytes)
UPDATE src/app/app.module.ts (784 bytes)

> ng g c recipes/recipe-list --skipTests true

CREATE src/app/recipes/recipe-list/recipe-list.component.html (26 bytes)
CREATE src/app/recipes/recipe-list/recipe-list.component.ts (294 bytes)
CREATE src/app/recipes/recipe-list/recipe-list.component.css (0 bytes)
UPDATE src/app/app.module.ts (668 bytes)

> ng g c recipes/recipe-list/recipe-item --skipTests true

CREATE src/app/recipes/recipe-list/recipe-item/recipe-item.component.html (26 bytes)
CREATE src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts (294 bytes)
CREATE src/app/recipes/recipe-list/recipe-item/recipe-item.component.css (0 bytes)
UPDATE src/app/app.module.ts (680 bytes)

That’s it. You have learnt how to create components inside a specific folder with angular CLI in Angular 9.

Hope it helped 🙂

Also See:

References:

angular docs