Can ionic2's pages support nested directory structure?

Question

I see the pages directory of many Ionic 2 projects is a flatted structure like below (if we use its generation command, the generated directory structure is flatted).

e.g.

    pages/
      |- login/
      |    |-login.html
      |    |-login.scss
      |    |_login.ts
      |- logout/
      |    |-logout.html
      |    |-logout.scss
      |    |_logout.ts
      |- order-list/
      |    |-order-list.html
      |    |-order-list.scss
      |    |_order-list.ts
      |- order-detail/
      |    |-order-detail.html
      |    |-order-detail.scss
      |    |_order-detail.ts 

But if a project includes many pages, i hope the pages directory supports sub directories like below:

e.g.

    pages/
      |- auth/
      |     |- login/
      |     |    |-login.html
      |     |    |-login.scss
      |     |    |_login.ts
      |     |- logout/
      |     |    |-logout.html
      |     |    |-logout.scss
      |     |    |_logout.ts
      |- order/
      |     |- list/
      |     |    |-list.html
      |     |    |-list.scss
      |     |    |_list.ts
      |     |- detail/
      |     |    |-detail.html
      |     |    |-detail.scss
      |     |    |_detail.ts

Does Ionic 2's pages support this? The same question to others directory like providers and pipes.

Answer 1

Of course it does. In fact, instead of grouping things in terms of what they are (pages, providers, pipes, directives, and so on) I do prefer to group them in terms of what they do just like Angular 2 style guides recommends.

Folders-by-Feature Structure STYLE 04-07

Do create folders named for the feature area they represent.

Why? A developer can locate the code, identify what each file represents at a glance, the structure is as flat as it can be, and there is no repetitive nor redundant names.

Why? The LIFT guidelines are all covered.

Why? Helps reduce the app from becoming cluttered through organizing the content and keeping them aligned with the LIFT guidelines.

Why? When there are a lot of files (e.g. 10+), locating them is easier with a consistent folder structure and more difficult in a flat structure.

Just keep in mind that you'll have to update the references both in all the files and also in the components templateUrl property (if you're not using the RC version). So

@Component({
  templateUrl: 'build/pages/login/login.html',
  pipes: [ ... ],
  directives: [ ... ]
})
...

will turn into:

@Component({
  templateUrl: 'build/pages/auth/login/login.html',
  pipes: [ ... ],
  directives: [ ... ]
})
...

Answer 2

Yes. It does.

You just have to respect the nesting when importing the pages for your NgModule in src/app/app.module.ts