Customized folder structure for Angular CLI

Question

I am experiencing a challenge while setup my new Angular project with Angular CLI.

I would like to create a folder structure something like below:

-- src
    -- components
       -- app
       -- students
       -- faculty
       -- admin
       -- common
          -- search
          -- table
          -- table_row
          -- list
          -- list_item
          -- header
          -- footer
          -- side_panel
    -- services
    -- static
       -- jsons
           -- cities
           -- states
           -- time_zones
       -- imgs
       -- scss

If we run ng g c some-component command it creates new component inside src/app/ only.

In terms of code, app itself is a component, then why does the Angular CLI not allow us to create another component parallel to the app component?

However, it is feasible if we create the folder's structure manually and without using CLI commands. The app also works fine.

Each application has its own size and functionality and needs some specific code design, then why impose such a limitation? Can anyone help me in understanding what the benefit of this structure is?

check the exact path.. your wrong because the CLI will start from the root folder as src/app/feature1.. — Aravind
– Aravind, Commented Jun 2, 2017 at 21:27
@Aravind, we can change the root folder /file in angular-cli config. My question if it's possible to create any folder structure manually then why restrictions while using CLI commands? — Vikram
– Vikram, Commented Jun 2, 2017 at 21:52
@Vikramthey are using ember-cli blueprints that put everything below app, CLI only adds the dir configured as root. — Mathias Rodriguez
– Mathias Rodriguez, Commented Jun 14, 2017 at 18:56

Raman Zhylich · Accepted Answer · 2018-05-03 21:25:38Z

3

You can change appRoot option in .angular-cli.json to avoid creation of app folder:

"apps": [
    {
      "appRoot": ".",
      "root": "src",
      "outDir": "dist",
      ...
    }
  ]

Then you can use ng generate command to create component in components folder:

ng generate component components/common/search

If you want to skip creation of src as well then set "root" to "\\"

answered May 3, 2018 at 21:25

Raman Zhylich

3,73728 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pierre Chavaroche Over a year ago

Do you have any idea how we have to configure with Angular 6 "angular.json" config? Thank you very much!

geoyws Over a year ago

"Property appRoot is not allowed" :(

Mathias Rodriguez · Accepted Answer · 2017-06-14 15:21:19Z

0

As far as I could debug from the @angular/cli source, the src part could be set in the apps[].root property on the .angular-cli.json config file.

However, the app/ part comes from the ember-cli blueprints and it seems as the opinionated path to structure Angular apps.

If you put "root": ".", the ng generate component new command will create the component in the following structure:

-- app
    -- new
        -- new.component.css 
        -- new.component.html
        -- new.component.spec.ts
        -- new.component.ts

EDIT: I have yet to solve some issues with ng serve that seem to be related to not using the "intended" structure, such as failing to resolve module imports and the like.

edited Jun 14, 2017 at 15:21

answered Jun 14, 2017 at 15:10

Mathias Rodriguez

3183 silver badges10 bronze badges

Comments

Giacomo Cerquone · Accepted Answer · 2017-09-01 20:34:04Z

0

Here is explained that the default root path of generated stuff is src/app and it's hardcoded (means you can't change it if you don't hack on ng-cli, something that's never a good idea to do).

https://github.com/angular/angular-cli/issues/3095

answered Sep 1, 2017 at 20:34

Giacomo Cerquone

2,5185 gold badges28 silver badges35 bronze badges

Comments

kav48382 · Accepted Answer · 2017-06-04 14:20:44Z

-1

I used something like that: ng g c common\some-component if you need it goes to the \common\ directory.

answered Jun 4, 2017 at 14:20

kav48382

911 silver badge7 bronze badges

1 Comment

Zimano Over a year ago

Try to be more specific as to how to use your solution to answer the OP's question. Maybe add some formatting to that command too! :-)

Collectives™ on Stack Overflow

Customized folder structure for Angular CLI

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related