Angular 2应该使用哪种类型的文件夹结构？

我是一位开始学习Angular 2的Angular 1开发人员。根据培训材料，有很多不同类型的文件夹结构方法。我将在下面列出每一个，我很想征询人们的意见，我应该使用它们以及为什么使用。另外，如果有未列出的方法，但您认为它会更好，请随时列出。

通过查看所有这些内容，方法3几乎就是我在做Angular 1应用程序时的方式。

方法1：angular2-quickstart

资料来源：https : //angular.io/guide/quickstart

资料夹结构：

方法2：ng-book2

来源：https：//www.ng-book.com/2/（必须付费才能查看文件）

资料夹结构：

方法3：mgechev /角2种子

资料来源：https : //github.com/mgechev/angular2-seed

资料夹结构：

现在有官方指南。mgechev/angular2-seed也与之保持一致。参见＃857。

https://angular.io/guide/styleguide#overall-structural-guidelines

我认为按功能构建项目是一种实用的方法。它使项目易于扩展和维护。它使项目的每个部分都完全自治。让我知道您对以下这种结构的看法： 角型脚本项目结构–角2

来源：http : //www.angulartypescript.com/angular-typescript-project-structure/

我将使用这个。与@Marin显示的第三位非常相似。

app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|   
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
|   |
|   |___ shared
|   |
|   |___ home
|   |
|   |___ about
|   |
|   |___ product
|
|___ services
|
|___ structures

因此，在进行了更多调查之后，我最终使用了方法3（mgechev / angular2-seed）的略微修订版​​。

我基本上将组件移到了主目录，然后每个功能都在其中。

也许像这样的结构：

|-- app
     |-- modules
       |-- home
           |-- [+] components
           |-- pages
              |-- home
              |-- home.component.ts|html|scss|spec
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- authentication
           |-- authentication.service.ts|spec.ts
       |-- footer
           |-- footer.component.ts|html|scss|spec.ts
       |-- guards
           |-- auth.guard.ts
           |-- no-auth-guard.ts
           |-- admin-guard.ts 
       |-- http
           |-- user
               |-- user.service.ts|spec.ts
           |-- api.service.ts|spec.ts
       |-- interceptors
           |-- api-prefix.interceptor.ts
           |-- error-handler.interceptor.ts
           |-- http.token.interceptor.ts
       |-- mocks
           |-- user.mock.ts
       |-- services
           |-- srv1.service.ts|spec.ts
           |-- srv2.service.ts|spec.ts
       |-- header
           |-- header.component.ts|html|scss|spec.ts
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |-- shared
          |-- components
              |-- loader
                  |-- loader.component.ts|html|scss|spec.ts
          |-- buttons
              |-- favorite-button
                  |-- favorite-button.component.ts|html|scss|spec.ts
              |-- collapse-button
                  |-- collapse-button.component.ts|html|scss|spec.ts
          |-- directives
              |-- auth.directive.ts|spec.ts
          |-- pipes
              |-- capitalize.pipe.ts
              |-- safe.pipe.ts
     |-- configs
         |-- app-settings.config.ts
         |-- dt-norwegian.config.ts
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss
     |-- assets

我最近一直在使用ng cli，因此很难找到一种结构化代码的好方法。

到目前为止，我见过的最高效的代码来自mrholek存储库（https://github.com/mrholek/CoreUI-Angular）。

这种文件夹结构使您可以保持根项目的整洁并结构化组件，避免了官方“样式指南”的冗余（有时无用）命名约定。

而且，这种结构在需要时可以对导入进行分组，并且避免单个文件有30行导入。

src
|
|___ app
|
|   |___ components/shared
|   |   |___ header
|   |
|   |___ containers/layout
|   |   |___ layout1
|   |
|   |___ directives
|   |   |___ sidebar
|   |
|   |___ services
|   |   |___ *user.service.ts* 
|   | 
|   |___ guards
|   |   |___ *auth.guard.ts* 
|   |
|   |___ views
|   |   |___ about  
|   |
|   |___ *app.component.ts*
|   |
|   |___ *app.module.ts*
|   |
|   |___ *app.routing.ts*
|
|___ assets
|
|___ environments
|
|___ img
|   
|___ scss
|
|___ *index.html*
|
|___ *main.ts*

如果项目很小并且会很小，我建议按类型进行结构化（方法2：ng-book2）

app
|- components
|  |- hero
|  |- hero-list
|  |- villain
|  |- ...
|- services
|  |- hero.service.ts
|  |- ...
|- utils
|- shared

如果项目将增长，则应按域构建文件夹（方法3：mgechev / angular2-seed）

app
|- heroes
|  |- hero
|  |- hero-list
|  |- hero.service.ts
|- villains
|  |- villain
|  |- ...
|- utils
|- shared

最好遵循官方文档。
https://angular.io/guide/styleguide#application-structure-and-ngmodules

我建议采用以下结构，这可能会违反一些现有约定。

我一直在努力减少路径中的名称冗余，并尝试使命名通常保持简短。

因此，没有/app/components/home/home.component.ts|html|css。

相反，它看起来像这样：

|-- app
    |-- users
        |-- list.ts|html|css
        |-- form.ts|html|css
    |-- cars
        |-- list.ts|html|css
        |-- form.ts|html|css
        |-- configurator.ts|html|css
    |-- app.component.ts|html|css
    |-- app.module.ts
    |-- user.service.ts
    |-- car.service.ts
|-- index.html
|-- main.ts
|-- style.css