Feature Modules

but how?

Zlatko Duric (@zladuric)

Architecture

...decisions that are hard to change.

- Martin Fowler

Problem

We have an empty app. How do we add a page, a list of things (posts, people, tweets, videos...)

How do we do that with this "feature module"?

Solution

Easy: create a feature module!

ng generate module a-module --routing
CREATE src/app/a-module/a-module-routing.module.ts (250 bytes)
CREATE src/app/a-module/a-module.module.spec.ts (284 bytes)
CREATE src/app/a-module/a-module.module.ts (284 bytes)

Another problem!

We need to create another feature, a list of things, but aligned to right!

 

Solution?

Easy! Copy-paste!

That was easy, but we have a problem

 

  • What if module A is NOT independant?
  • It needs to show the A list, but also B list?

 

Modules can export things!

  • What if module a is NOT independant?
  • It needs to show the A list, but also B list?
@NgModule({
  imports:      [
    CommonModule,
    BRoutingModule,
  ],
  declarations: [ BComponent, BListComponent ],
  exports: [ BListComponent ],
})
export class BModule { }

And the real problem:

 we want it lazy loaded!

Will this work with lazy loading?

Just one more thing...

 

  • Does it REALLY work?

Are routes the problem?

// A Module router
... 
    { path: '', component: AComponent },
...

// B Module router

    { path: '', component: BComponent },

But what changed?

// Working version A Module
... 

  imports:      [
    CommonModule,
    ARoutingModule,
    BModule,
  ],
...

// Broken version
... 

  imports:      [
    CommonModule,
    BModule,
    ARoutingModule,
  ],
...

First route is matched

Can we guarantee the order?

We cannot rely on the routing order

  • Router executes the first matching route
  • This relies on implicit knowledge of imported modules' exports

The REAL problem 

How to set up your feature modules so that you can use and mix them

What next?

  • Quick NgModule recap
  • Types of NgModules
  • Where do things belong

There are more than 10 pages on NgModules

Quick NgModule Recap

Types of Feature Modules

Feature module Guidelines
Domain Provide app-specific "business" components
Routed Pages in the app
Routing Provide routing for ^, they're always in pairs
Service provide "utility services": http, messaging, dialogs
Widget generic fidgets that you can put in any other webapp.

What to export?

Domain module:

- usually a presentation component and it's supporting directives, pipes, component

- exports it's main "feature" component, e.g. TweetComponent

- does not "work" alone, imported by other modules

Routed domain module:

- no exports

- no providers

- lazy loaded

- goes together with:

Routing module:

- only ever defines routes for it's page,

- top-level path: '', but can have more paths and children

 

What to export?

Services module:

- provide global services, e.g messaging and error handling

- provide all interceptors

Widget modules

- not a module, but modules

- import only what you need

- tree-shaker sends his love

 

What modules should we have?

Module What it does
CoreModule Without this, the app can't even.
- Shell: header, footer, nav, 404, grid
- Comms: Infrastructure for Backend: HttpClient, interceptors etc.
- Auth: it's sometimes a feature, but still core
- Messaging: popups, dialogs, toasts
Shared Modules All the UI widgets: date pickers, data table customization etc.
NOT a module.
Pages Routed domain modules: timeline, settings page etc
Page Features Domain moduleBusiness widgets, e.g. TweetCmp

Feature module

Property What it does
declarations Feature component, all the little helpers
imports dependencies
providers (almost) nothing!
exports Just the public API

Routed module

Property What it does
declarations Container component, "presentation" components
imports Router module, deps, Feature module
providers nothing!
exports nothing!

Service module

Property What it does
declarations Nothing
imports dependencies
providers utility services
exports nothing!

State-management-library-independant

How to fix things lists?

Ideas?

Thanks for attention

Angular Feature Modules

By Zlatko Đurić

Made with Slides.com

Angular Feature Modules

Modules are a great way to organize an application and extend it with capabilities from external libraries. In practical terms, modules are a great way to totally mess the architecture of your app. And complicate dependencies. And make testing a hell. And... you get the picture. This talk presents one way of architecting your Angular apps so they avoid one or two of these pitfalls.

  • 554

More from Zlatko Đurić