I have an Angular 6 app where lazy loading is used. My folder structure looks like this:

src
  app
    main
      products
      invoices
      customers
      suppliers
    core
      header
      footer
      services
      core.module.ts
    shared
    app-routing.module.ts
    appponent.html
    appponent.css
    appponent.spec.ts
    appponent.ts

I followed the remended folder structure for lazy loading (here, each folder under the main folder is its own module section).

If I want to incorporate ngrx, I have seen differing opinions as to where to include the store, reducers, etc. One article I read said to add a store folder and include all of the ngrx pieces in there. Another article I read said to add the ngrx pieces to each module/section.

There is another stackoverflow article here: What is the best structure for app using ngrx? that talks about ngrx folder structure, but no mention of lazy loading.

Is there a remended way to structure ngrx when lazy loading is used? Does it make more sense to add a store with reducers, actions, etc. to each module or to make one giant store folder with everything in that? This app is not too big; it's more of a medium sized application.

Thanks!

I have an Angular 6 app where lazy loading is used. My folder structure looks like this:

src
  app
    main
      products
      invoices
      customers
      suppliers
    core
      header
      footer
      services
      core.module.ts
    shared
    app-routing.module.ts
    app.ponent.html
    app.ponent.css
    app.ponent.spec.ts
    app.ponent.ts

I followed the remended folder structure for lazy loading (here, each folder under the main folder is its own module section).

If I want to incorporate ngrx, I have seen differing opinions as to where to include the store, reducers, etc. One article I read said to add a store folder and include all of the ngrx pieces in there. Another article I read said to add the ngrx pieces to each module/section.

There is another stackoverflow article here: What is the best structure for app using ngrx? that talks about ngrx folder structure, but no mention of lazy loading.

Is there a remended way to structure ngrx when lazy loading is used? Does it make more sense to add a store with reducers, actions, etc. to each module or to make one giant store folder with everything in that? This app is not too big; it's more of a medium sized application.

Thanks!

• javascript
• angular
• ngrx

• 3 We have an example with a suggested folder structure using lazy loading here: github./DeborahK/Angular-NgRx-GettingStarted/tree/master/… – DeborahK Commented Aug 1, 2018 at 16:57
• 1 @DeborahK, this is an excellent example! Thanks!! – J-man Commented Aug 1, 2018 at 17:56

1 Answer 1

Absolutely add the ngrx pieces to each module separately. It gives you a good structure and every module is self-contained. Furthermore, the ngrx store in each module can be lazy loaded as well, so the state will only be there if you are loading the module.

Further details here: https://medium./@AnkurRatra/lazy-loading-of-modules-with-ngrx-store-4th-version-angular-2-23c93295d4e8