AnalogJS is what Angular should be. It definitely makes handling server-side applications easier. It fixes all the deployment problems with Angular. I rebuilt my Todo app again, this time for Analog. I actually rebuilt the old Angular Version using Observables, Classes, and Injectables… Yuck! I decided to incorporate all the modern Angular techniques in a modern Angular Framework. ## TL;DR Building this app with Analog was a breeze. I realized how important Signals are after rebuilding the Angular Version using older techniques. Zoneless Angular will be amazing. ### 🔑 The Modern Approach (Signals) We will see a page router, injector tokens, transfer state utilities, new `@if` conditional controls, built-in `.env` support, easy deployment, and the possibility of deploying to Edge Functions. ### 🗝️ The Traditional Approach (Observables) I rewrote my old article to focus on the old way of doing things. While still applicable today, older code bases should be refactored to use them correctly if they can’t use the modern version with Signals. This version covers Observables, Services, Zone.js Change Detection, and the traditional conditional directives. See [Angular Todo App with Firebase.](https://code.build/p/angular-todo-app-with-firebase-fmLJ37) ### 📗 The Realistic Approach (Mix-and-Match) Your app will probably use a combination of techniques. This article explains the new Angular techniques for using Firebase, but you will probably use both techniques in a complex application. ## Setup Add *AngularFire*. ```tsx ng add @angular/fire ``` Add your Firebase configuration to your `.env` file. Make sure the keys have double quotes. ```tsx VITE_FIREBASE_CONFIG={"apiKey":"...","authDomain":"..."...} ``` Add the correct providers to your application in `app.config.ts`. ```tsx const firebaseConfig = JSON.parse( import.meta.env['VITE_FIREBASE_CONFIG'] ); export const appConfig: ApplicationConfig = { providers: [ provideFileRouter(), provideHttpClient(withFetch()), provideClientHydration(), importProvidersFrom( provideFirebaseApp(() => initializeApp(firebaseConfig)), provideFirestore(() => getFirestore()), provideAuth(() => getAuth()), // provideStorage(() => getStorage()), // provideAnalytics(() => getAnalytics()), ) ], }; ``` ## Generate the Pages Generate a home component and an about component. ```tsx ng g c components/about // or ng g c components/home -t -s ``` ✏️ Use `-s` for inline styles (good for tailwind) and—`t` for inline templates. We will have two pages, the *Todo Page*, and the *About Page*. Create `pages/index.page.ts` and `pages/about.page.ts`. I like to link them to the components I use to keep my features in one place. ```tsx // index.page.ts import { Component } from '@angular/core'; import { HomeComponent } from '@components/home/home.component'; @Component({ selector: 'app-index', standalone: true, imports: [HomeComponent], template: ` ` }) export default class IndexComponent { } ``` You should also create a resolver for the About page. ```tsx ng g r components/about ``` And you can import it into the About route with the `routeMeta` keyword. ```tsx import { RouteMeta } from '@analogjs/router'; import { Component } from '@angular/core'; import AboutComponent from '@components/about/about.component'; import { aboutResolver } from '@components/about/about.resolver'; export const routeMeta: RouteMeta = { resolve: { data: aboutResolver } }; @Component({ selector: 'app-route', standalone: true, imports: [AboutComponent], template: ` ` }) export default class AboutRoute { } ``` If you’re not using the Page Directory, you should import the router in your `app.routes.ts` file instead. ```tsx export const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent, resolve: { data: aboutResolver } } ]; ``` ## User Service Create the service. If you don’t want the spec file, add `--skip-tests`. ```tsx ng g s user --skip-tests ``` However, we will not use the classes; we will use injection tokens. Delete the contents of the file and add the user type. ```tsx export interface userData { photoURL: string | null; uid: string; displayName: string | null; email: string | null; }; ``` ### Injection Token An injection token is a functional version of a service. A class cannot use *Tree Shaking*, so all methods are always imported. A function can be imported where and only where it is needed. Injection tokens are similar to hooks in other frameworks, except they can be shared anywhere. They have three arguments (technically two, one, and an object): 1. The name of the token. This is like the name of the context. 2. The provider. Use `root`, and it can be shared everywhere. 3. The `factory()` function runs only once. ### Auth Token Our first token is the `auth` token. We don’t want this to load on the browser, so we can check for that with `PLATFORM_ID`. ```tsx export const FIREBASE_AUTH = new InjectionToken( 'firebase-auth', { providedIn: 'root', factory() { const platformID = inject(PLATFORM_ID); if (isPlatformBrowser(platformID)) { return inject(Auth); } return null; } } ); ``` ### User Token We need to share the user state from `onIdTokenChanged`, better than `onAuthStateChanged` because it handles token changes as well, in more than one component. ```tsx export const USER = new InjectionToken( 'user', { providedIn: 'root', factory() { const auth = inject(FIREBASE_AUTH); const destroy = inject(DestroyRef); const user = signal<{ loading: boolean, data: userData | null, error: Error | null }>({ loading: true, data: null, error: null }); // server environment if (!auth) { user.set({ data: null, loading: false, error: null }); return user; } // toggle loading user.update(_user => ({ ..._user, loading: true })); const unsubscribe = onIdTokenChanged(auth, (_user: User | null) => { if (!_user) { user.set({ data: null, loading: false, error: null }); return; } // map data to user data type const { photoURL, uid, displayName, email } = _user; const data = { photoURL, uid, displayName, email }; // print data in dev mode if (isDevMode()) { console.log(data); } // set store user.set({ data, loading: false, error: null }); }, (error) => { // handle error user.set({ data: null, loading: false, error }); }); destroy.onDestroy(unsubscribe); return user; } } ); ``` We create and return a signal with the loading data; it updates every time the user state changes. I also handle `error` cases. Notice we use a `DestroyRef` to unsubscribe. ALWAYS HANDLE UNSUBSCRIBE! Injection Tokens are pure magic. *No other framework can do this out of the box!* ### Inject Notice we can inject the `FIREBASE_AUTH` or the `USER` token anywhere we like and use it. So much better than putting it into the constructor. Beautiful! ```tsx const auth = inject(FIREBASE_AUTH); ``` ### Login and Logout The login and logout functions can be used anywhere in the same manner. ```tsx export const LOGIN = new InjectionToken( 'LOGIN', { providedIn: 'root', factory() { const auth = inject(FIREBASE_AUTH); return () => { if (auth) { signInWithPopup( auth, new GoogleAuthProvider() ); return; } throw 'Can\\\\'t run Auth on Server'; }; } } ); export const LOGOUT = new InjectionToken( 'LOGOUT', { providedIn: 'root', factory() { const auth = inject(FIREBASE_AUTH); return () => { if (auth) { signOut(auth); return; } throw 'Can\\\\'t run Auth on Server'; }; } } ); ``` ## Todo Service The Todo service is similar, except that it depends on the user service. You can’t subscribe to a user’s collection unless the user is logged in. ```tsx export const TODOS = new InjectionToken( 'TODOS', { providedIn: 'root', factory() { const db = inject(Firestore); const user = inject(USER); const todos = signal<{ data: TodoItem[], loading: boolean, error: FirebaseError | null }>({ data: [], loading: true, error: null }); effect((onCleanup) => { const userData = user().data; if (!userData) { untracked(() => { todos.set({ loading: false, data: [], error: null }); }); return; } const unsubscribe = onSnapshot( // query realtime todo list query( collection(db, 'todos'), where('uid', '==', userData.uid), orderBy('createdAt') ), (q) => { // get data, map to todo type const data = snapToData(q); /** * Note: Will get triggered 2x on add * 1 - for optimistic update * 2 - update real date from server date */ // print data in dev mode if (isDevMode()) { console.log(data); } // add to store todos.set({ data, loading: false, error: null }); }, (error) => { // handle errors todos.set({ loading: false, data: [], error }); }); onCleanup(unsubscribe); }); return todos; } } ); ``` The `onSnapshot` will not get subscribed to unless there is a user, and it will be automatically unsubscribed when a user logs out. Again, we handle unsubscribing with `DestroyRef`. ### Snapshot Data This version does not use [Data Converters](https://code.build/p/does-firestore-need-data-converters-sSveEL), but you could equally build one. Here we just handle the data from the collection manually. We also need to handle the [Dates and Timestamps.](https://code.build/p/firestore-dates-and-timestamps-WjGiiQ) ```tsx export const snapToData = ( q: QuerySnapshot ) => { // creates todo data from snapshot if (q.empty) { return []; } return q.docs.map((doc) => { const data = doc.data({ serverTimestamps: 'estimate' }); const createdAt = data['createdAt'] as Timestamp; return { ...data, createdAt: createdAt.toDate(), id: doc.id } }) as TodoItem[]; } ``` ### Add, Delete, and Update The CRUD operations work as expected too. Signals get the data in the factory functions. ```tsx export const ADD_TODO = new InjectionToken( 'ADD_TODO', { providedIn: 'root', factory() { const user = inject(USER); const db = inject(Firestore) return (e: SubmitEvent) => { e.preventDefault(); const userData = user().data; if (!userData) { throw 'No User!'; } // get and reset form const target = e.target as HTMLFormElement; const form = new FormData(target); const { task } = Object.fromEntries(form); if (typeof task !== 'string') { return; } // reset form target.reset(); addDoc(collection(db, 'todos'), { uid: userData.uid, text: task, complete: false, createdAt: serverTimestamp() }); }; } } ); export const UPDATE_TODO = new InjectionToken( 'UPDATE_TODO', { providedIn: 'root', factory() { const db = inject(Firestore); return (id: string, complete: boolean) => { updateDoc(doc(db, 'todos', id), { complete }); }; } } ); export const DELETE_TODO = new InjectionToken( 'DELETE_TODO', { providedIn: 'root', factory() { const db = inject(Firestore); return (id: string) => { deleteDoc(doc(db, 'todos', id)); }; } } ); ``` It would be impossible to do this cleanly in any Framework except Angular (and Analog, of course). ### Todo Component Showing the todos is much better than using the `ngIf` directive. ```tsx

@if (!todos().loading) {

@for (todo of todos().data; track todo.id) { } @empty {

Add your first todo item!

}

} @else {

}

``` We can load and track the data easily without creating unnecessary templates. ## About Page We also need to get data server-side only. We do this with a resolver. ### Resolver Utilities I’m hoping to get these utility functions implemented into Analog. ```tsx export const useAsyncTransferState = async ( name: string, fn: () => T ) => { const state = inject(TransferState); const key = makeStateKey(name); const cache = state.get(key, null); if (cache) { return cache; } const data = await fn() as T; state.set(key, data); return data; }; export const useTransferState = ( name: string, fn: () => T ) => { const state = inject(TransferState); const key = makeStateKey(name); const cache = state.get(key, null); if (cache) { return cache; } const data = fn() as T; state.set(key, data); return data; }; export const injectResolver = (name: string) => inject(ActivatedRoute).data.pipe(map(r => r[name])); export const injectSnapResolver = (name: string) => inject(ActivatedRoute).snapshot.data[name] as T; ``` ### About Resolver The about resolver uses the `useAsyncTransferState` utility function to automatically grab the function on the server and and hydrate the data to the browser. This is done automatically in a component but not in a resolver. ```tsx import { inject, isDevMode } from '@angular/core'; import { ResolveFn } from '@angular/router'; import { Firestore, doc, getDoc } from '@angular/fire/firestore'; import { useAsyncTransferState } from '@lib/utils'; export type AboutDoc = { name: string; description: string; }; export const aboutResolver: ResolveFn = async () => useAsyncTransferState('about', async () => { const db = inject(Firestore); const aboutSnap = await getDoc( doc(db, '/about/ZlNJrKd6LcATycPRmBPA') ); if (!aboutSnap.exists()) { throw 'Document does not exist!'; } const data = aboutSnap.data() as AboutDoc; if (isDevMode()) { console.log(data); } return data; }); ``` It returns a resolved promise before the component is rendered. ### About Component We can easily inject the resolver into our component using the utility resolver function. ```tsx about = injectResolver('data'); ``` This is the `async` version which requires a pipe. `AsyncPipe` must also be imported. However, if we don’t expect our data to change in the component, we could use the snapshot version, which doesn’t require an observable and `AsyncPipe`. ```tsx about = injectSnapResolver('data'); ``` The rest of the data is shown as expected. ```tsx import { Component } from '@angular/core'; import { AboutDoc } from './about.resolver'; import { injectResolver } from '@lib/utils'; import { AsyncPipe } from '@angular/common'; @Component({ selector: 'app-about', standalone: true, imports: [AsyncPipe], template: ` @if (about | async; as data) {

} ` }) export default class AboutComponent { about = injectResolver('data'); } ``` Importing components from the server to the browser in Angular has never been so easy! Building an app in Angular has become fun again! No more worrying about Zone.js problems or complex observables. 🎩 Signals with Analog are awesome! **Repo:** [GitHub](https://github.com/jdgamble555/analog-firebase) **Demo:** [Netlify Edge](https://analog-firebase.netlify.app/) J

{{ data.name }}

Total Tags: 32

Analog Todo App with Firebase