Generate inside module folder

Question

I'm working with an Angular 2 application based on Angular-CLI skeleton, I had the habit of structuring my src folder with one directory by module, and each component related to this module in the same folder.

src
    app
        documents
            document-list.component.ts
            document-list.component.html
            documents.component.ts
            documents.component.html
            document.module.ts
        app.component.ts
        app.module.ts
    main.ts

Now that I'm using Angular-CLI, I would like to take profit of each feature, but when I'm generating a new component, no matter what, it keep creating a new folder for my component when I just want to put it inside the related folder.

src
    app
        documents
            document-list
                document-list.component.ts
                document-list.component.html
            documents.component.ts
            documents.component.html
            document.module.ts
        app.component.ts
        app.module.ts
    main.ts

Is it possible to keep my previous structure, is it a bad practice? The guideline recommends to avoid useless directory depth so I'm kind of disturbed.

score 58 · Accepted Answer · edited May 29 '20 at 20:14

58

Assuming you are in your application's root directory and want to create components inside src/app/documents as you show above, you can use the --flat option to have your component created without creating a directory. To create the component as you request above, use this command:

ng generate component document-list --flat

edited May 29 '20 at 20:14

ruffin

16,507
9
88
138

answered Dec 23 '16 at 15:38

Brocco

62,737
12
70
76

No possibility of defining it as the default option in my `angular-cli.json`? – LoïcR Dec 23 '16 at 17:17
Not right now, but that could be added in the future, if it's something you'd like, file an issue on the repo. – Brocco Dec 23 '16 at 17:59
1

Tested: it also can be used to generate a module without folder – FindOutIslamNow Jun 09 '18 at 11:31

score 25 · Answer 2 · answered Jan 17 '17 at 23:27

25

Using angular-cli you can run ng g component documents/document-list and it will create the structure you need, (assuming app is the root of your application).

Hope this helps.

answered Jan 17 '17 at 23:27

Gman

2,433
3
26
36

The question is about NOT having the extra 'document-list' folder but having the component files inside the 'documents' folder. – hogan Sep 17 '17 at 03:23
But what if the structure already exists, and you want to add a new component folder as a nested component. Do you do `ng g c /existing-components-folder/new-component-folder`? – AllJs Jan 10 '18 at 22:32

score 8 · Answer 3 · answered Feb 06 '18 at 19:22

8

To create a component inside a folder that either already exist or does not have the same name as the component without creating a sub folder...

ng generate component directory/component-name --flat

For example: ng generate component test/test-list --flat

This will generate the component in the folder test and NOT create a sub folder test-detail...

answered Feb 06 '18 at 19:22

Warren LaFrance

552
7
20

Why the down votes, I tested it and this does work and relates to the original question.. As mentioned here "The question is about NOT having the extra 'document-list' folder but having the component files inside the 'documents' folder. – hogan Sep 17 '17 at 3:23" – Warren LaFrance Feb 07 '18 at 19:24
Maybe is because the example image is as if you used `ng g c test-list` because `test` is very similar to `test-list`, maybe you can improve the example making two components in the same folder instead of only one. This is my opinion although I haven't downvoted you. – PhoneixS Apr 09 '18 at 11:34
As far as I'm concerned, you have the best answer – Kurt Miller Dec 03 '18 at 16:44

Generate inside module folder

3 Answers3