Angular 2: What is the "official" standard folder structure?

Question

So I've been looking around to see what the most popular / standard folder structure is for Angular 2 apps and it doesn't seem like there is one. Is there anyone who is using in Angular 2 in production who can shed some light?

Here are some approaches I found:

1) Split by feature, with 1) a shared folder 2) a folder for each feature that contains all the files (whether component, or service, or whatever) directly inside that folder https://angular.io/docs/ts/latest/guide/style-guide.html#!#application-structure

2) Angular 1 style (no nesting or separation by features, just components, pipes, services, models)

For #1 would it feels weird not having a subfolder for components, subfolder for services, etc. Where would I put a service being used across all the routes?

BTW I'm using the Angular CLI generator: https://github.com/angular/angular-cli

Answer 1

The style guide provides lots of does and don'ts about how to structure your app https://angular.io/styleguide

It says to maintain a flat hierarchy with a folder per feature and related files (component, template, style, ...) in the same folder.

Answer 2

I think that it depends of how you like to organise your app. If the app is small I like to separate them by type (components, services, views, etc) but if it's a big and complex application then I use to divide it by functionalities because it's easier to find the folder you are looking for.

Another alternative would be a combination of both, divide the app by type (components, services, etc) and then inside each type divide it by similarity (all the components related to users inside the folder components/users/usercomponent1, usercomponent2, etc)