28

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.

Improve this question

3 Answers 3

Reset to default
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
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

No possibility of defining it as the default option in my angular-cli.json?
Not right now, but that could be added in the future, if it's something you'd like, file an issue on the repo.
Tested: it also can be used to generate a module without folder
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).

enter image description here

Hope this helps.

Improve this answer

2 Comments

The question is about NOT having the extra 'document-list' folder but having the component files inside the 'documents' folder.
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?
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... enter image description here

Improve this answer

3 Comments

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"
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.
As far as I'm concerned, you have the best answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.