refactor: recipe demo app rebuilt on AngularFire- #3753

[armando-navarro]

This is the same application as the recipe-demo branch, with its Firebase layer rebuilt on AngularFire.

It is 8 commits, 13 files, and 249 lines added against 262 removed. Each commit converts one area, so the diff can be read a commit at a time.

What AngularFire replaces

In plain terms

• The app no longer wires up Firebase services by hand. The base branch builds four wiring objects and threads them through three config files. This branch declares each Firebase product it uses in a single line.
• Watching who is signed in used to be a subscription the app opened, held onto and closed. It is now one line, and Angular closes it.
• Reading the live recipe list used to be a listener the app managed itself, with its own success path, error path and cleanup. It is now one declaration.
• Disposing of the per-request Firebase instance on the server used to be an explicit delete call. It is now a property on the call that creates the instance.
• One workaround the base branch needs for local development goes away, because the library already does it.

In detail

• A firebase-tokens.ts holding four InjectionTokens, wired through five hand-written provider objects across three config files, becomes six provide* calls. The file is deleted.
• An onAuthStateChanged subscription, the signal it pushed into, the teardown that unsubscribed it and a whenAuthResolved() wrapper become one toSignal(authState(auth), { initialValue: null }).
• A resource whose loader opened onSnapshot by hand, pushed snapshots and errors into a signal and registered the unsubscribe function as an abort listener on the loader's abortSignal, becomes an rxResource over collectionData.
• An explicit deleteApp in a DestroyRef.onDestroy block becomes a releaseOnDeref property, following the pattern in docs/auth.md.
• The App Check debug-token flag the base branch sets by hand on localhost goes away, because provideAppCheck sets it already.

Across the four files that hold the Firebase layer, the base branch is 397 lines and this branch is 364.

What it does not change

These are invisible in a diff, and each is a place a reader could otherwise draw a stronger conclusion than the change supports.

• The hand-rolled TransferState handoff carrying the recipe list from server to browser. Angular's automatic state transfer covers HttpClient, which Firestore never touches, and AngularFire adds nothing here, so the same hand-written code is needed on both branches.
• All of server.ts, including the __session cookie plumbing behind the signed-in server render.
• beforeAuthStateChanged, which has no observable form in the library and stays imported from firebase/auth on both branches.
• The hasAuthIdToken type predicate that narrows REQUEST_CONTEXT.
• The signed-in server render itself, which the base branch already had. What the diff shows is that feature being converted, not gained.

What it gains

Less code is the visible part. These are the things the app stops being responsible for.

• Teardown becomes the framework's job. Two subscriptions the base branch has to store and unsubscribe itself are now torn down by Angular. There is no unsubscribe function to keep hold of, so there is none to forget.

• Initialization order comes free. provideFirestore lists Auth and App Check among its own dependencies, with the library's comment reading "Firestore+Auth work better if Auth is loaded first", so Firestore resolves after Auth without the app arranging it. The base branch owns that ordering by hand.

• The error path arrives with the read. The base branch passes an explicit error callback to onSnapshot and pushes the error into a signal itself. rxResource surfaces it without that.

• The App Check debug token is handled more broadly than the hand-written version. The base branch sets the flag for an exact localhost match. provideAppCheck sets it whenever the app is in development mode or the hostname is localhost, 0.0.0.0 or 127.0.0.1. Worth an honest caveat: this app's angular.json allows only localhost, so the wider coverage cannot actually be observed here.

• The server's wait for auth stops being explicit. The base branch waits with an app initializer calling authStateReady(). Here authState is zone-wrapped, and that wrapper registers the pending task that holds the server render open, so the initializer is deleted. One precision worth stating, because it is easy to over-credit: the recipe list's own server wait comes from Angular's rxResource, not from AngularFire. Auth is the place where AngularFire demonstrably carries the wait in this app.

What it costs

• The recipe read becomes unvalidated. collectionData(query, { idField: 'id' }) returns untyped documents, so the store crosses them to the app's Recipe type with two casts and nothing checks the shape at runtime. The base branch used a FirestoreDataConverter.
• Every AngularFire-wrapped call needs an injection context, so the two stores gain an injected EnvironmentInjector and wrap their calls in runInInjectionContext. Nine call sites, six in the recipe store and three in the auth store. Template event handlers are not injection contexts, which is why the write paths need this and the base branch does not.

Running it

Deployed instance: https://angularfire--recipe-demo-97859.us-central1.hosted.app

recipe-demo/README.md on this branch covers the project setup, the run commands, the design decisions that are hard to deduce from the code, and the gaps a production app would close that this one deliberately leaves open.

What happens to this pull request

This should never be merged. It exists as a reference demo.