HomeChallengesRepsProblemsLeaderboardTake a challenge

The Frontend, Split To Match

One Angular shell, one lazily-loaded package per backend service, and generated proxies so a backend rename breaks the build instead of production.

Advanced25 min on the clock5 graded checks · 100 pointsLayered Architecture and Modular SystemsPro

AssumesRoutes and GuardsThis stage is Angular and TypeScript at the end of an ASP.NET sprint. Without the routing stage you have not met loadChildren or RoutesService, and the stage will be lost on syntax rather than on architecture.

Graded by reading your code against the checklist below.

What you build

  • One lazy route per service package
  • Each backend service mapped in the apis configuration
  • Generated service proxies, never hand-written HttpClient calls
  • Routes contributed by the package, not hardcoded in the shell
  • Permissions carried through to the menu

Done means

Adding a service adds a package and a config entry, and touches no shell component.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else.

  1. One lazy route per service package+25A frontend split to match
  2. Each service is mapped in the apis config+20A frontend split to match
  3. Generated proxies, not hand-written HTTP calls+25A frontend split to match
  4. Routes are contributed, not hardcoded+20A frontend split to match
  5. The menu respects permissions+10Roles and policies

What it teaches

The rest of Layered Architecture and Modular Systems