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ć
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