How to create Component inside folder in Angular 6

Question

I've attached folder hierarchy of my angular project below:

As you can here. My app folder is under _component folder. also, my other ts files like auth is under _auth folder, interfaces are inside _model folder etc.

You when I execute ng g c componentName command, it creates app folder in root and create component inside it. so I have to go to particular folder and then I need to execute command.

My question is, is there anyway that I can create component direct from my root folder. like ng g c _component/MycomponentName

Updated:
I've also tried other ways to create it like below:

This is the answer: https://stackoverflow.com/a/46851416/7020538 — Abhijith S, Aug 18 '18 at 07:20
Or you could make your life, and the life of all the developers maintaining this code, easier by respecting the standard layout. — JB Nizet, Aug 18 '18 at 07:26
@AbhijithS - I checked that post. he has taken _component folder inside app folder. My situation is opposite of it. my app folder is inside _Component folder — Ubiquitous Developers, Aug 18 '18 at 07:26

nsndvd · Answer 1 · 2018-08-18T09:47:19.103

2

This is the normal command, to be run in the project root.

ng g c path/to/name

But due to your non-standard project structure, ng is failing to find the NgModule in which your new component should be imported. So you either can use the --skip-import option, or the --module path/to/your/app/module option and point ng to the right file

edited Aug 18 '18 at 09:47

answered Aug 18 '18 at 07:50

nsndvd

800
8
21

I tried that as well. but still same error. You can check screenshot I've attached – Ubiquitous Developers Aug 18 '18 at 08:57
@UbiquitousDevelopers see my updated answer, let me know if it's not clear enough – nsndvd Aug 18 '18 at 09:42

score 0 · Answer 2 · answered Jan 28 '19 at 10:07

0

It's better to change your project structure into standard angular project structure like this.enter image description here

then you can generate new component moving relevant place through terminal and type

ng g c component name

answered Jan 28 '19 at 10:07

Nalin Athukorala

111
2
4

score 0 · Answer 3 · answered Mar 13 '21 at 08:11

0

ANS : ng generate component auth/reset-password

answered Mar 13 '21 at 08:11

Arun

63
1
4

score 0 · Answer 4 · answered Mar 13 '21 at 09:49

Better you could use following folder structure and get rid of that error so that you can create modules and components accordingly.

-app
  
-shared
  -services
  -pipes
  -components
  -models

-modules_folder
  -module_A
    -components_folder
        -component_A.component.ts
        -component_A.component.html
        -component_A.component.css            
    -models_folder
        -model_A.model.ts
    -services_folder
        -service_A.service.ts

    -module_A.component.ts 
    -module_A.component.html
    -module_A.component.css
    -module_A.module.ts        
    -module_A-routing.module.ts  

-app.component.ts
-app.component.html
-app.component.css
-app.module.ts
-app-routing.module.ts

Above folder structure gives a kind of micro-service architecture as well where each module having its own services/dependencies.

How to create Component inside folder in Angular 6

4 Answers4