r/angular • u/127001-sweet-127001 • 7d ago

A test for keeping shared Angular code independent of feature code

A folder called shared doesn't stay shared if it starts importing code from individual features.

I built ArchUnitTS so rules like that can live in the test suite. For an Angular project, you can select your shared TypeScript files and forbid dependencies on the feature folders. If someone introduces one, the architecture test fails.

The attached clip is a general demo of the library. The repo also has an Angular example with component and service dependency checks, and setup instructions for Jasmine, Jest and Vitest.

The exact rules depend on how you structure the app. You don't need to copy the example's architecture to use it; a single boundary you keep checking in reviews is a reasonable place to start.

Repo: https://github.com/LukasNiessen/ArchUnitTS
Angular example: https://github.com/LukasNiessen/ArchUnitTS/tree/main/examples/angular-example

11 Upvotes

92% Upvoted

6 comments sorted by

4

u/ldn-ldn 7d ago

Use NX, problem solved.

2

u/n00bz 6d ago

Yup. NX has an eslint rule for module boundaries

1

u/DMezhenskyi 5d ago

Or Sheriff if you need something more lightweight https://github.com/sheriff-arch/sheriff

2

u/_kolahan_ 6d ago

Shared code should live in its own published lib. It is the native way, no rules required. If there are an import you will get a cyclical reference

1

u/AwesomeFrisbee 6d ago

I never thought about using unit tests to prevent people from adding stuff that isn't up to our agreements. Interesting way to prevent people from adding code that works but isn't really what we wanted