Results Summary
Performance
95%
Lighthouse Score
Bundle Size
72.8KB
Gzipped
Build Time
19.3s
Average
Load Time
2.6s
LCP
Complexity
85
Cyclomatic
Performance Metrics
CLS
0.0001
FCP
2107ms
LCP
2649ms
TBT
42.5ms
Bundle Analysis
Compression
3.2x
File Count
3
JS %
92.7%
Total Size
233.4KB
Build Info
Build Time
19.3s
Output Size
2.4MB
HMR Time
318ms
Dev Startup
14.8s
About the Angular Weather Front App
Status
-
Lint
-
Build
-
Test
Links
Usage Instructions
First, follow the repo setup instructions.
Then cd into ./apps/angular/
and and use the following commands:
- Dev Command npm run dev
- Test Command npm run test
- Lint Command npm run lint
- Build Command npm run build
- Start npm start
npm run verify from the root of the project.
App Requirements
The purpose of this project, was to build the same identical app in every frontend framework, in order to benchmark and compare their performance. As such, each app is built to meet identical requirements, which are then verified with the test suite.
Technical Requirements
- Binding user input and validation
- Fetching external data asynchronously
- Basic state management of components
- Handling fallback views (loading, errors)
- Using browser features (location, storage, etc)
- Logic blocks, for iterative content and conditionals
- Lifecycle methods (mounting, updating, unmounting)
Feature Requirements
- 🌦️ Live weather conditions
- 📅 7-day weather forecast
- 🔍 City search functionality
- 📍 Geolocation support
- 💾 Persistent location storage
- 📱 Responsive design
- ♿ Accessible interface
- 🎨 Multi-theme support
- 🧪 Fully unit tested
- 🌐 Internationalized
Angular Implementation
Dependency Injection & Services
The app uses Angular's dependency injection system with services marked as @Injectable({ providedIn: 'root' }). The WeatherStateService manages global state using RxJS BehaviorSubject.
RxJS Reactive Patterns
State management leverages RxJS observables with operators like catchError, finalize, switchMap, and delay. The app component uses takeUntil pattern for subscription cleanup to prevent memory leaks.
Standalone Components
All components use Angular's modern standalone API, eliminating the need for NgModules. Components import their dependencies directly in the imports array.
Inline Templates
The AppComponent demonstrates Angular's inline template syntax with data binding ([isLoading], (search)), structural directives, and conditional rendering.
TypeScript Integration
Full TypeScript support with typed interfaces for weather data and app state, providing compile-time type checking and better developer experience.
About Angular
Real-world App
Since the weather app is very simple, and doesn't show of the full features of a framework, it may be helpful to see a more practical implementation of a Angular app. So, checkout:
Intro to Angular
About Angular
Angular is a full-blown framework from Google, not just a library. It comes with everything out of the box, from routing to forms to testing. Its TypeScript-first approach and structured architecture make it great for large, enterprise apps. The learning curve is steep but it’s incredibly powerful when mastered.
My thoughts on Angular
Angular isn't the cool kid anymore, but it's incredibly solid and ships with absolutely everything you need. TypeScript from day one, dependency injection, forms, HTTP client, routing, testing utilities - it's all there, officially maintained and deeply integrated. No need to cobble together a stack from random npm packages.
For our weather app, Angular did kinda feel like using a sledgehammer to crack a nut. Using the newer standalone components (no more NgModule boilerplate!) made things cleaner, but I was still writing a lot more code than I needed in Svelte or Vue. That said, everything does just works, and the TypeScript integration is phenomenal.
The dependency injection system was quite nice for having WeatherService automatically injected into components. And RxJS observables handle all the async weather data very nicley, though they do add a learning curve if you're not familiar with reactive programming.
Angular's template syntax with *ngIf, *ngFor, and (click) feels natural once you get used to it. Change detection just works without thinking about it (unlike React where you're constantly memoizing things).
For a simple weather app, we really didn't need any of Angular's big or flagship features (like guards, resolvers, or lazy loading). But I recently build Domain Locker using Angular, and it was a great fit for the complexity of that project, As the structure, type safety, and tooling made it easy to manage a large codebase with multiple features.
Choosing a Framework
Stack Match
Not sure if Angular is right for your project? Use Stack Match to select your preferences and get a tailored recommendation based on the benchmark data.
