Angular 2ではどのタイプのフォルダー構造を使用する必要がありますか？

私はAngular 1の開発者で、Angular 2について学び始めています。トレーニング資料に応じて、さまざまな種類のフォルダー構造メソッドがあります。以下にそれぞれをリストアップします。私は、どちらを使用する必要があるのか​​、そしてその理由について人々の意見を得たいと思います。また、記載されていない方法がある場合でも、動作が良いと思われる場合は、遠慮なく記載してください。

これらすべてを見ると、メソッド＃3は、Angular 1アプリの実行方法とほぼ同じです。

方法1：angular2-quickstart

出典：https : //angular.io/guide/quickstart

フォルダー構造：

方法2：ng-book2

出典：https : //www.ng-book.com/2/（ファイルを表示するには料金がかかります）

フォルダー構造：

方法3：mgechev / angular2-seed

出典：https：//github.com/mgechev/angular2-seed

フォルダー構造：

公式ガイドラインは現在あります。mgechev/angular2-seedそれとの整合性もありました。＃857を参照してください。

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

機能ごとにプロジェクトを構成することは、実用的な方法だと思います。これにより、プロジェクトの拡張性と保守性が容易になります。そして、それはプロジェクトの各部分を完全な自治で機能させる。この構造についての感想をお聞かせください： ANGULAR TYPESCRIPTプロジェクトの構造– ANGULAR 2

ソース：http : //www.angulartypescript.com/angular-typescript-project-structure/

これを使います。@Marinが示す3番目のものと非常に似ています。

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）です。

このフォルダー構造により、ルートプロジェクトをクリーンに保ち、コンポーネントを構造化できます。これにより、公式のスタイルガイドの冗長な（時には役に立たない）命名規則が回避されます。

また、この構造は、必要なときにインポートをグループ化し、1つのファイルに対して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