¿Cuál es la forma correcta de organizar archivos en el proyecto Angular 2?

El marco angular tiene una guía de estilo oficial, que se puede encontrar en los documentos en angular.io. Describe diferentes convenciones de nomenclatura, mejores prácticas para la estructura del proyecto y mucho más.

Los puntos más importantes de las pautas:

• Por lo general, cada componente tiene su propia carpeta, que incluye los 4 archivos (.ts, .html, .css amd .spec.ts).
• Los archivos de componentes deben tener el sufijo “.component”, los servicios con “.service”, etc. Ejemplo: my.component.ts, my.component.html, my.service.ts
• Los componentes, directivas, etc. que se usan en toda la aplicación, deben declararse y exportarse desde el módulo compartido (shared.module.ts)
• Los servicios suelen ser únicos en toda la aplicación. Por lo tanto, generalmente se proporcionan en el módulo central (core.module.ts) que se importa a app.module.

La mejor y más fácil forma de seguir estas pautas es la CLI angular. Si crea aplicaciones, componentes, servicios, etc. con él, seguirá automáticamente estas pautas.

¡Eso no me parece muchos archivos!

Aquí está la estructura idealizada para un proyecto de su tamaño.

johnpapa / angular2-tour-of-heroes

Y aquí está el estilo John Papa Angular2.

Angular

Por lo general, me gusta colocar cada componente, es HTML y CSS en una sola carpeta. En efecto, tengo diferentes carpetas, cada una de las cuales tiene un único componente .ts y todas sus plantillas asociadas dentro