CODEWITHSUNDEEP
angularangular-cli
LoïcR
LoïcR

Reputation: 5039

Generate inside module folder

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.

Upvotes: 28

Views: 41076

Answers (3)

Brocco
Brocco

Reputation: 64883

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

Upvotes: 58

Warren LaFrance
Warren LaFrance

Reputation: 582

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

Upvotes: 8

Gman
Gman

Reputation: 2453

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.

Upvotes: 25

Related Questions