refactor(angular-query): build with tsup and remove devtools component (#8284)

* chore(angular-query): build with tsup

* ci: apply automated fixes

* remove unused tslib dependency

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: arnoud-dv

examples/angular/pagination/package.json

@@ -23,7 +23,6 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.12",
-    "@tanstack/angular-query-devtools-experimental": "^5.60.0",
     "typescript": "5.3.3"
   }
 }

examples/angular/pagination/src/app/app.component.ts

@@ -1,12 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import { ExampleComponent } from './components/example.component'
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-root',
   standalone: true,
-  template: `<example /><angular-query-devtools initialIsOpen />`,
-  imports: [AngularQueryDevtools, ExampleComponent],
+  template: `<example />`,
+  imports: [ExampleComponent],
 })
 export class AppComponent {}

examples/angular/pagination/src/app/app.config.ts

@@ -6,13 +6,14 @@ import {
 import {
   QueryClient,
   provideTanStackQuery,
+  withDevtools,
 } from '@tanstack/angular-query-experimental'
 import { projectsMockInterceptor } from './api/projects-mock.interceptor'
 import type { ApplicationConfig } from '@angular/core'
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(withInterceptors([projectsMockInterceptor]), withFetch()),
-    provideTanStackQuery(new QueryClient()),
+    provideTanStackQuery(new QueryClient(), withDevtools()),
   ],
 }

examples/angular/query-options-from-a-service/package.json

@@ -24,7 +24,6 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.12",
-    "@tanstack/angular-query-devtools-experimental": "^5.60.0",
     "typescript": "5.3.3"
   }
 }

examples/angular/query-options-from-a-service/src/app/app.component.html

@@ -8,5 +8,4 @@
     sequences)
   </strong>
 </p>
-<angular-query-devtools initialIsOpen />
 <router-outlet />

examples/angular/query-options-from-a-service/src/app/app.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core'
 import { RouterOutlet } from '@angular/router'
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [AngularQueryDevtools, RouterOutlet],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styles: [],
 })

examples/angular/rxjs/package.json

@@ -9,7 +9,6 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/cdk": "17.3.10",
     "@angular/common": "^17.3.12",
     "@angular/compiler": "^17.3.12",
     "@angular/core": "^17.3.12",
@@ -25,7 +24,6 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.12",
-    "@tanstack/angular-query-devtools-experimental": "^5.60.0",
     "typescript": "5.3.3"
   }
 }

examples/angular/rxjs/src/app/app.component.ts

@@ -1,12 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import { ExampleComponent } from './components/example.component'
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-root',
   standalone: true,
-  template: `<example /><angular-query-devtools initialIsOpen />`,
-  imports: [AngularQueryDevtools, ExampleComponent],
+  template: `<example />`,
+  imports: [ExampleComponent],
 })
 export class AppComponent {}

examples/angular/rxjs/src/app/components/example.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { NonNullableFormBuilder, ReactiveFormsModule } from '@angular/forms'
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import {
   injectQuery,
   keepPreviousData,
@@ -14,7 +13,7 @@ import { AutocompleteService } from '../services/autocomplete-service'
   selector: 'example',
   standalone: true,
   templateUrl: './example.component.html',
-  imports: [AngularQueryDevtools, ReactiveFormsModule],
+  imports: [ReactiveFormsModule],
 })
 export class ExampleComponent {
   #autocompleteService = inject(AutocompleteService)

examples/angular/rxjs/src/app/services/autocomplete-service.ts

@@ -11,7 +11,7 @@ interface Response {
 })
 export class AutocompleteService {
   #http = inject(HttpClient)
-  getSuggestions = (term: string) =>
+  getSuggestions = (term: string = '') =>
     term.trim() === ''
       ? of({ suggestions: [] })
       : this.#http.get<Response>(`/api/autocomplete?term=${term}`)