Module based project structure angular

Question

I'm a newbie angular developer. I've searched many many project structure as a result then I create a module base structure but i'm not sure this approach

My created a project structure as below;

-src
-app
    -components
        -header
        -left-side
        -custom-select
        ... and more component here 
        **components.module.ts**
    -pages
        -home
        -login
        -not-found
        ... and more page here 
        index.ts
        **pages.module.ts**
     -services
        APIService.ts
        LoadingService.ts
        LocalStorageService.ts
        PagesService.ts
        SweetAlertService.ts
        ... and more page here 
        index.ts
        **services.module.ts**
    -models
    -interfaces 
    -data
    ... others 
    app-routing.module.ts
    app.component.html
    app.component.ts
    app.module.ts
-assets
-environments
... others
index.html

more detail and source code here

Is that a good solution for lose complex app.modules?

No. You should group by functional features, not by technical layer. — JB Nizet
– JB Nizet, Commented Nov 18, 2019 at 14:46
So Can i fix my structure project or I have to create new one ? @JBNizet — errorau
– errorau, Commented Nov 19, 2019 at 8:25

Caro · Accepted Answer · 2019-11-18 14:51:01Z

2

A better approach:

App
    - coreModule : all singleton services
    - featureModule1
        -component1
        -component2
        -services
    -featureModule2
    -sharedModule: all reusables components between modules

answered Nov 18, 2019 at 14:51

Caro

6506 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StepUp · Accepted Answer · 2019-11-18 15:24:10Z

2

As Angular style guide says:

Folders-by-feature structure

Style 04-07

Do create folders named for the feature area they represent.

Why? A developer can locate the code and identify what each file represents at a glance. The structure is as flat as it can be and there are no repetitive or 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, for example 10+, locating them is easier with a consistent folder structure and more difficult in a flat structure.

Do create an NgModule for each feature area.

Why? NgModules make it easy to lazy load routable features.

Why? NgModules make it easier to isolate, test, and reuse features.

For more information, refer to this folder and file structure example

An example of file structure:

edited Nov 18, 2019 at 15:24

answered Nov 18, 2019 at 14:50

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

2 Comments

errorau Over a year ago

can i modifier my exist project?

StepUp Over a year ago

@errorau if this project has just one contributor, then you can edit, otherwise you can talk with team about modifying a project structure.

dolpsdw · Accepted Answer · 2019-11-18 14:45:30Z

1

Modules are components that enable LazyLoading.

So i Will recommend you create one Module per "widget" that could be fitted into a lazy loaded strategy.

Also read about Smart components and presentation components for best practices on reusable presentational components.

answered Nov 18, 2019 at 14:45

dolpsdw

685 bronze badges

Collectives™ on Stack Overflow

Module based project structure angular

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related