deborahk / angular-rxjs-signals-fundamentals

Sample code for the Pluralsight course "RxJS and Angular Signal Fundamentals"

Hi there 👋

🔎 Where to find me:

• YouTube
• Twitter
• Mastodon
• freecodecamp.org

🔭 I’ve published FREE courses on YouTube:

Gentle Introduction to Programming for Beginners (14 lessons)

Gentle Introduction to HTML for Beginners (21 lessons)

Gentle Introduction to GitHub for Beginners (21 lessons)

Gentle Introduction to CSS for Beginners (22 lessons)

Gentle Introduction to Bootstrap for Beginners (14 lessons)

Gentle Introduction to JavaScript for Beginners (17 lessons)

angular-rxjs-signals-fundamentals's Issues

The InMemory Data Serive is missing the Service decorator

Within the AppData, it is missing the Service/Injectable decorator which is failing to Inject when fetching the data resulting in a 404.

Expected

@Injectable({
  providedIn: 'root',
})
export class AppData implements InMemoryDbService {

Using toSignal in a root-provided service can lead to memory leaks?

According to @NetanelBasal toSignal uses the injector’s context for unsubscription by default. When used in a root service, this can lead to memory leaks when the consuming component is destroyed. More on that you can read here: https://netbasal.com/navigating-the-nuances-of-tosignal-in-angular-what-to-know-e4d6a4b5dfaf

Your code, for example the ProductService root service, also uses this potentially dangerous pattern:

// apm-final/src/app/products/product.service.ts
@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private productsResult = toSignal(this.productsResult$,
    { initialValue: ({ data: [] } as Result<Product[]>) });

  products = computed(() => this.productsResult().data);
  productsError = computed(() => this.productsResult().error);
}

// apm-final/src/app/products/product-list/product-list.component.ts
export class ProductListComponent {
  private productService = inject(ProductService);

  // Products
  products = this.productService.products;
}