Repository navigation
chore(sample): update the sample app to Angular 22 - #3845
Merged
Merged
Conversation
armando-navarro
added a commit
to armando-navarro/angularfire
that referenced
this pull request
Nov 11, 2026
The sample app now has one provideFirebaseApp with initializeBrowserOrServerApp in its shared app.config.ts (angular#3845), so the sentence about its split client and server files no longer holds. Refs angular#3843
Carries sample/ from Angular 21 to 22 with ng update, matching what ng new 22 generates: TypeScript 6, firebase 13, vitest 5, Node 24, provideBrowserGlobalErrorListeners, no explicit zoneless provider and no withIncrementalHydration (both are defaults now), the Eager change detection the migration adds removed again so the components run on the OnPush default. The server app is now built by initializeBrowserOrServerApp, which reads the ID token from the request context and releases the server app after the render. The old factory never released it. Calls to functions AngularFire does not wrap sit outside runInInjectionContext, with a comment on each, so the sample shows where the injection context is needed and where it is not. security.allowedHosts gains localhost: Angular 22 answers 400 to any host not on the list, so the built server could not be run locally. Both lockfiles regenerated with npm 10. Refs angular#3669
armando-navarro
force-pushed
the
sample-angular-22
branch
from
November 11, 2026 23:31
63c5d39 to
ab768c8
Compare
armando-navarro
marked this pull request as ready for review
November 11, 2026 23:33
tyler-reitz
approved these changes
Nov 11, 2026
tyler-reitz
left a comment
Collaborator
There was a problem hiding this comment.
Approving. I rebuilt the tarball and ran the sample's ng build and ng test (2 files, 4 tests) on Node 26, and checked both before-and-after claims in the description against the firebase and @angular/ssr 21/22 sources. Both hold.
Optional nit: upboats.component.ts explains runInInjectionContext again in each of upboat, downboat and newAnimal. One explanation above the first handler would cover all three.
armando-navarro
added a commit
that referenced
this pull request
Nov 13, 2026
* docs: say which wrapped calls do not hold the app unstable docs/zones.md says callback APIs hold the app unstable until an initial value, so a server render waits for data. #3827 makes a set of calls exceptions because their first callback may never come. Waiting on a callback that never comes would keep the app from ever becoming stable. List those calls in docs/zones.md, and point at onValue, object, list, listVal and fromRef with the value event as the calls that still make a server render wait. In docs/database.md, say the same under stateChanges, auditTrail and fromRef. Refs #3826 * docs: describe firebase 13 support in the v22 upgrade guide #3831 lets AngularFire 22 accept firebase 12 or 13, and the ng update migration now writes the range of the firebase major already installed. The upgrade guide still said the migration writes ^12.18.0 and quoted peer warnings that name only that range. State the supported range and what the migration writes, update the Yarn 1 and pnpm 9/10 warnings to their current wording, and add a section on moving to firebase 13: VertexAIBackend is removed and its packages declare Node 24.12 or later. Refs #3830 * docs: describe microtask delivery in the v22 upgrade guide #3833 moves every Observable read from a setInterval timer to the next microtask checkpoint. As a breaking change it needs a section in the upgrade guide: which tests now see a value they used to wait for, the setTimeout ordering flip, and the zoneless server render case for hand-written TransferState entries. Refs #3832 * docs: describe the callback pending-task change in the v22 upgrade guide #3837 removes a callback read's pending task right after the callback instead of one setTimeout(fn, 0) delay later. As a breaking change it needs a section in the upgrade guide: what moves sooner, and which tests notice. Refs #3836 * docs: say a handler passed as an observer object is wrapped too #3829 wraps a handler passed as an observer object, such as { next, error }, the way it wraps a function, so the injection context reaches both forms. Refs #3828 * docs(compat): add a setup section in NgModule and standalone form The compat API's setup steps left docs/install-and-setup.md when #3236 rewrote it for the modular API, and nothing replaced them. docs/compat.md had no setup at all, the Realtime Database pages pointed at an "Installation guide" that no longer covered compat, and no page showed the standalone form. A standalone app with only the modular providers then fails its first compat injection with NG0201 for angularfire2.app.options (#3683). The new section on docs/compat.md gives both forms, says when the modular providers may stay, states the error the missing module produces, and lists the compat module of each product. The twelve compat pages that had an NgModule-only snippet or no setup at all now point at it. Fixes #3683 * docs: say which package managers refuse an incompatible firebase The v22 upgrade guide said an incompatible firebase is refused at install time. Only npm refuses it, and only when package.json requests the incompatible version. Yarn and pnpm install it with a warning. * docs: say which Firestore functions are not zone wrapped #3842 re-exports Firestore's query and reference builders, field values, comparators and setLogLevel without the zone wrapper. In docs/zones.md, add a paragraph listing them, change the switchMap example to a read, since building the query no longer warns, and say the Verbose log level covers only wrapped calls. Refs #3842 * docs(auth): build the server app with initializeBrowserOrServerApp The server-rendering guide's step 4 becomes the one call, the five details become three, the App Check token gets a relay section, the response gets a Cache-Control header, and the manual callback stays in a "Building the app yourself" section that step 4 points at, for apps that prefer it or whose AngularFire version has no such function. The release modes say what a throwing ngOnDestroy does to a timed release. * docs(auth): describe the sample as an example of the one-call server app The sample app now has one provideFirebaseApp with initializeBrowserOrServerApp in its shared app.config.ts (#3845), so the sentence about its split client and server files no longer holds. Refs #3843 * docs: say how to move from 22.0.0-rc.0 in the v22 upgrade guide The guide covered upgrades from 21, a 21 release candidate and a 22 canary build, but not from the first 22 release candidate. ng add saves a prerelease as an exact version, so an app on 22.0.0-rc.0 stays there until ng update @angular/fire@next moves it. That command also runs migration-v22 again, which reports "No changes made" for a firebase entry already inside the supported range. Refs #3834 * docs(auth): say which hooks stop a releaseAfterRender release The caveat on releaseAfterRender said a throwing ngOnDestroy "stops that teardown". It now says the release is a DestroyRef.onDestroy callback, that Angular runs it after every service's and component's ngOnDestroy, and that an ngOnDestroy method or an ApplicationRef.onDestroy listener that throws keeps it from running. The default release, which does not run during the injector's destroy, is unaffected either way. A new paragraph says to call initializeBrowserOrServerApp in app.config.ts rather than a route's providers: a route's child injector is not destroyed with the request, so a release registered there never runs. Refs #3844 * docs(auth): say the default release still happens from a route's providers Tyler asked on #3844 whether the default release, now tied to a root service, releases a server app built in a lazy route's providers. It does: the request's root injector is destroyed, the route's child injector is not, so only a releaseAfterRender release registered there is lost. Checked with a child environment injector that is never destroyed, in both modes. Refs #3844 * docs: add onConfigUpdate to the calls that do not hold the app unstable #3829 set onConfigUpdate to blockUntilFirst: false in tools/build.ts, because its observer runs only when a fetched template differs from the active one. The list in docs/zones.md left it out. Found in the #3835 review. Refs #3829 * docs(auth): say a second provideFirebaseApp can render signed out The bullet said a second registration makes a signed-in render fail on a freshly started server. With more than one registration, FirebaseApp resolves to the default app. Run on fresh servers, a second plain initializeApp(config) registration creates that app on the first request, so signed-in pages render signed out with no error. Only when no registration creates the default app, as with two initializeBrowserOrServerApp registrations, does the render fail, and only until a signed-out request creates it. Found in the #3835 review. Refs #3844
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Checklist
README.mdis updated. No library docs change.app.component.spec.tsis updated for the new providers and name.yarn install,yarn testrun successfully?: yes, with npm, insidesample/on Node 24:npm install ../angular-fire-22.0.0.tgz,ng build,ng test(2 files, 4 tests).Description
Carries
sample/from Angular 21 to Angular 22, the way #3671 carried it from 19 to 21:ng update @angular/core@22 @angular/cli@22ng new22 generatesinitializeBrowserOrServerAppfrom feat(app): add initializeBrowserOrServerApp for browser & server apps #3844, which replaces the hand-written server-app factory and releases the server app the old factory never released.Changes
@angular/*22.2, TypeScript 6.0,firebase13,vitest5,jsdom30,@types/node22, theng22-testname, and Node 24 (firebase 13's packages require it).app.config.tsmatches the 22 scaffold:provideBrowserGlobalErrorListeners()addedprovideZonelessChangeDetection()dropped (zoneless is the default)provideClientHydration()withoutwithIncrementalHydration()(incremental hydration is the default).Removed
ChangeDetectionStrategy.Eagerthat Angular'schange-detection-eagermigration added to all nine components again (so it does not appear in the diff), and the sample runs on Angular 22'sOnPushdefault.app.config.ts: oneprovideFirebaseApp(() => initializeBrowserOrServerApp(environment.firebase))for both platforms, as step 4 of the Authentication guide shows.server.tsalready passes tohandle(), builds a Firebase server app for a signed-in render and the ordinary app otherwise, and releases the server app once the render is garbage-collected.app.config.client.tsis deleted. Its browser-only providers (Analytics with the two tracking services, Messaging, Performance) move toapp.config.ts, since each already provides nothing on the server, andmain.tsbootstraps fromappConfig, asng newdoes.app.config.server.tskeeps onlyprovideServerRendering.Calls to functions AngularFire does not wrap (
doc,collection,query,orderBy,increment,serverTimestamp) sit outsiderunInInjectionContext, with a one-line comment on each.GoogleAuthProvider,onIdTokenChangedandsignInWithPopupare imported from@angular/fire/auth.onAuthStateChangedstays the SDK's own inside the sample'sauthState, which applies the wrapper to the whole function.server.tskeeps thetrustProxyHeaders: ['x-forwarded-host', 'x-forwarded-proto']thetrust-proxy-headersmigration wrote, with a comment in place of its TODO.angular.json:security.allowedHostsgainslocalhost.400 Bad Requesterror to any host not on that list (Angular 21 logged an error and fell back to client-side rendering), and it was empty, sonpm run serve:ssr:ng22-testcould not be reached locally.README.mdhas a "Running the server build" section that says deployments add their hostnames there or inNG_ALLOWED_HOSTS.tsconfig.app.jsonkeeps theextendedDiagnosticsblock thestrict-safe-navigation-narrowmigration wrote.functions/package.jsonmoves to the Node 24 runtime. Bothpackage-lock.jsonfiles regenerated with npm 10.Behavior to know
EBADENGINEwarnings for thefirebasepackages.Verification
ng buildandng test(2 files, 4 tests) on Node 24.22.2, with one copy offirebase(npm ls firebase).firebase emulators:exec --import seedwith the production server bundle):uid.ng serve, where AngularFire's injection-context warning prints: sign-in, a write and the function call with no AngularFire warning.@deferblocks on incremental hydration.npm run buildof the Cloud Function from its regenerated lockfile.Not exercised: "New animal" (a
window.prompt), "Log in with Google" (a real provider popup), Messaging (no token flow in the emulators).