docs: update examples

timdeschryver · timdeschryver · commit df8a9e96ae93 · 2025-09-19T19:18:04.000+02:00
diff --git a/projects/www/src/app/examples/ngrx-start/src/app.config.ts b/projects/www/src/app/examples/ngrx-start/src/app.config.ts
@@ -1,5 +1,8 @@
-import { ApplicationConfig } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideZonelessChangeDetection,
+} from '@angular/core';
 
 export const appConfig: ApplicationConfig = {
-  providers: [],
+  providers: [provideZonelessChangeDetection()],
 };
diff --git a/projects/www/src/app/examples/ngrx-start/src/main.ts b/projects/www/src/app/examples/ngrx-start/src/main.ts
@@ -1,14 +1,6 @@
 import '@angular/compiler';
 import { bootstrapApplication } from '@angular/platform-browser';
-import {
-  mergeApplicationConfig,
-  provideZonelessChangeDetection,
-} from '@angular/core';
 import { App } from './app';
 import { appConfig } from './app.config';
 
-const config = mergeApplicationConfig(appConfig, {
-  providers: [provideZonelessChangeDetection()],
-});
-
-bootstrapApplication(App, config);
+bootstrapApplication(App, appConfig);
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app.config.ts b/projects/www/src/app/examples/store-walkthrough/src/app.config.ts
@@ -1,11 +1,17 @@
-import { ApplicationConfig } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideZonelessChangeDetection,
+} from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
 import { provideStore } from '@ngrx/store';
 
 import { booksReducer } from './state/books.reducer';
 import { collectionReducer } from './state/collection.reducer';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideZonelessChangeDetection(),
+    provideHttpClient(),
     provideStore({
       books: booksReducer,
       collection: collectionReducer,
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app.ts b/projects/www/src/app/examples/store-walkthrough/src/app.ts
@@ -3,7 +3,7 @@ import { Store } from '@ngrx/store';
 
 import { selectBookCollection, selectBooks } from './state/books.selectors';
 import { BooksActions, BooksApiActions } from './state/books.actions';
-import { GoogleBooks } from './book-list/books';
+import { GoogleBooksService } from './book-list/books-service';
 import { BookList } from './book-list/book-list';
 import { BookCollection } from './book-collection/book-collection';
 
@@ -24,7 +24,7 @@ import { BookCollection } from './book-collection/book-collection';
   imports: [BookList, BookCollection],
 })
 export class App implements OnInit {
-  private readonly booksService = inject(GoogleBooks);
+  private readonly booksService = inject(GoogleBooksService);
   private readonly store = inject(Store);
 
   protected books = this.store.selectSignal(selectBooks);
diff --git a/projects/www/src/app/examples/store-walkthrough/src/book-collection/book-collection.ts b/projects/www/src/app/examples/store-walkthrough/src/book-collection/book-collection.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
 
 @Component({
   selector: 'app-book-collection',
diff --git a/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.ts b/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Book } from './books.model';
+import { Book } from './book';
 
 @Component({
   selector: 'app-book-list',
diff --git a/projects/www/src/app/examples/store-walkthrough/src/book-list/book.ts b/projects/www/src/app/examples/store-walkthrough/src/book-list/book.ts
diff --git a/projects/www/src/app/examples/store-walkthrough/src/book-list/books-service.ts b/projects/www/src/app/examples/store-walkthrough/src/book-list/books-service.ts
@@ -2,10 +2,10 @@ import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 
 import { Observable, map } from 'rxjs';
-import { Book } from './books.model';
+import { Book } from './book';
 
 @Injectable({ providedIn: 'root' })
-export class GoogleBooks {
+export class GoogleBooksService {
   private readonly http = inject(HttpClient);
 
   getBooks(): Observable<Array<Book>> {
diff --git a/projects/www/src/app/examples/store-walkthrough/src/main.ts b/projects/www/src/app/examples/store-walkthrough/src/main.ts
@@ -1,15 +1,6 @@
 import '@angular/compiler';
 import { bootstrapApplication } from '@angular/platform-browser';
-import {
-  mergeApplicationConfig,
-  provideZonelessChangeDetection,
-} from '@angular/core';
 import { App } from './app';
 import { appConfig } from './app.config';
-import { provideHttpClient } from '@angular/common/http';
 
-const config = mergeApplicationConfig(appConfig, {
-  providers: [provideZonelessChangeDetection(), provideHttpClient()],
-});
-
-bootstrapApplication(App, config);
+bootstrapApplication(App, appConfig);
diff --git a/projects/www/src/app/examples/store-walkthrough/src/state/app.state.ts b/projects/www/src/app/examples/store-walkthrough/src/state/app.state.ts
@@ -1,4 +1,4 @@
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
 
 export interface AppState {
   books: ReadonlyArray<Book>;
diff --git a/projects/www/src/app/examples/store-walkthrough/src/state/books.actions.ts b/projects/www/src/app/examples/store-walkthrough/src/state/books.actions.ts
@@ -1,5 +1,5 @@
 import { createActionGroup, props } from '@ngrx/store';
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
 
 export const BooksActions = createActionGroup({
   source: 'Books',
diff --git a/projects/www/src/app/examples/store-walkthrough/src/state/books.reducer.ts b/projects/www/src/app/examples/store-walkthrough/src/state/books.reducer.ts
@@ -1,7 +1,7 @@
 import { createReducer, on } from '@ngrx/store';
 
 import { BooksApiActions } from './books.actions';
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
 
 export const initialState: ReadonlyArray<Book> = [];
 
diff --git a/projects/www/src/app/examples/store-walkthrough/src/state/books.selectors.ts b/projects/www/src/app/examples/store-walkthrough/src/state/books.selectors.ts
@@ -1,5 +1,5 @@
 import { createSelector, createFeatureSelector } from '@ngrx/store';
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
 
 export const selectBooks = createFeatureSelector<ReadonlyArray<Book>>('books');
 
diff --git a/projects/www/src/app/examples/store-walkthrough/stackblitz.yml b/projects/www/src/app/examples/store-walkthrough/stackblitz.yml
@@ -13,8 +13,8 @@ files:
   src/state/collection.reducer.ts: './src/state/collection.reducer.ts'
   src/book-list/book-list.ts: './src/book-list/book-list.ts'
   src/book-list/book-list.css: './src/book-list/book-list.css'
-  src/book-list/books.ts: './src/book-list/books.ts'
-  src/book-list/books.model.ts: './src/book-list/books.model.ts'
+  src/book-list/book.ts: './src/book-list/book.ts'
+  src/book-list/books-service.ts: './src/book-list/books-service.ts'
   src/book-collection/book-collection.ts: './src/book-collection/book-collection.ts'
   src/book-collection/book-collection.css: './src/book-collection/book-collection.css'
   index.html: './index.html'
diff --git a/projects/www/src/app/pages/guide/store/walkthrough.md b/projects/www/src/app/pages/guide/store/walkthrough.md
@@ -8,12 +8,12 @@ The full example is available on StackBlitz:
 
 ## Tutorial
 
-1. Generate a new project using the <ngrx-docs-stackblitz name="ngrx-start"></ngrx-docs-stackblitz> and create a folder named `book-list` inside the `src` folder. This folder is used to hold the book list component later in the tutorial. For now, let's start with adding a file named `books.model.ts` to reference different aspects of a book in the book list.
+1. Generate a new project using the <ngrx-docs-stackblitz name="ngrx-start"></ngrx-docs-stackblitz> and create a folder named `book-list` inside the `src` folder. This folder is used to hold the book list component later in the tutorial. For now, let's start with adding a file named `book.ts` to reference different aspects of a book in the book list.
 
-<ngrx-code-example header="src/book-list/books.model.ts" path="store-walkthrough/src/book-list/books.model.ts">
+<ngrx-code-example header="src/book-list/book.ts" path="store-walkthrough/src/book-list/book.ts">
 </ngrx-code-example>
 
-2. Right click on the `app` folder to create a state management folder `state`. Within the new folder, create a new file `books.actions.ts` to describe the book actions. Book actions include the book list retrieval, and the add and remove book actions.
+1. Right click on the `app` folder to create a state management folder `state`. Within the new folder, create a new file `books.actions.ts` to describe the book actions. Book actions include the book list retrieval, and the add and remove book actions.
 
 <ngrx-code-example header="src/state/books.actions.ts" path="store-walkthrough/src/state/books.actions.ts">
 </ngrx-code-example>
@@ -40,12 +40,12 @@ The full example is available on StackBlitz:
 
 7. In the `book-list` folder, we want to have a service that fetches the data needed for the book list from an API. Create a file in the `book-list` folder named `books.service.ts`, which will call the Google Books API and return a list of books.
 
-<ngrx-code-example header="src/book-list/books.ts" path="store-walkthrough/src/book-list/books.ts">
+<ngrx-code-example header="src/book-list/books-service.ts" path="store-walkthrough/src/book-list/books-service.ts">
 </ngrx-code-example>
 
-8. Add the `HttpClient` module using the `provideHttpClient` provider in the `main.ts` file in order to make HTTP requests.
+8. Add the `HttpClient` module using the `provideHttpClient` provider in the `app.config.ts` file in order to make HTTP requests using the `HttpClient`.
 
-<ngrx-code-example header="src/main.ts" path="store-walkthrough/src/main.ts">
+<ngrx-code-example header="src/app.config.ts" path="store-walkthrough/src/app.config.ts">
 </ngrx-code-example>
 
 9. In the same folder (`book-list`), create the `BookList` with the following template. Update the `BookList` class to dispatch the `add` event.

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Book } from '../book-list/books.model';`
	`1`	`+import { Book } from '../book-list/book';`
`2`	`2`
`3`	`3`	`export interface AppState {`
`4`	`4`	`books: ReadonlyArray<Book>;`