refactor: add readonly and private modifiers to injected services and signals

emp74ark · emp74ark · commit 3e025a347f29 · 2025-09-04T13:11:41.000+02:00
diff --git a/angular.json b/angular.json
@@ -58,7 +58,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
+                  "maximumWarning": "1000kB",
                   "maximumError": "1MB"
                 },
                 {
diff --git a/src/app/components/article-list/article-list.ts b/src/app/components/article-list/article-list.ts
@@ -54,16 +54,16 @@ export class ArticleList {
       scrollUp({ trigger: !!this.articles().length })
     })
   }
-  readonly router = inject(Router)
-  readonly feedService = inject(FeedService)
-  readonly destroyRef = inject(DestroyRef)
-  readonly pageService = inject(PageService, { skipSelf: true })
+  private readonly router = inject(Router)
+  private readonly feedService = inject(FeedService)
+  private readonly destroyRef = inject(DestroyRef)
+  private readonly pageService = inject(PageService, { skipSelf: true })
 
-  articles = input.required<Article[]>()
-  displayedArticles = linkedSignal(this.articles)
-  isRefreshing = input<boolean>(false)
-  favTagId = input.required<string>()
-  userTags = input.required<Tag[]>()
+  readonly articles = input.required<Article[]>()
+  readonly displayedArticles = linkedSignal(this.articles)
+  readonly isRefreshing = input<boolean>(false)
+  readonly favTagId = input.required<string>()
+  readonly userTags = input.required<Tag[]>()
 
   $display = this.pageService.$display
 
diff --git a/src/app/components/confirmation-dialog/confirmation-dialog.ts b/src/app/components/confirmation-dialog/confirmation-dialog.ts
@@ -16,8 +16,9 @@ import { MatButton } from '@angular/material/button'
   styleUrl: './confirmation-dialog.css',
 })
 export class ConfirmationDialog {
-  readonly dialogRef = inject(MatDialogRef)
-  data: { title?: string; message?: string; confirmButtonText?: string } = inject(MAT_DIALOG_DATA)
+  private readonly dialogRef = inject(MatDialogRef)
+  readonly data: { title?: string; message?: string; confirmButtonText?: string } | null =
+    inject(MAT_DIALOG_DATA)
 
   onAgree() {
     this.dialogRef.close(true)
diff --git a/src/app/components/health-status/health-status.ts b/src/app/components/health-status/health-status.ts
@@ -10,12 +10,12 @@ import { catchError, of } from 'rxjs'
   styleUrl: './health-status.css',
 })
 export class HealthStatus implements OnInit {
-  healthService = inject(HealthService)
-  destroyRef = inject(DestroyRef)
+  private readonly healthService = inject(HealthService)
+  private readonly destroyRef = inject(DestroyRef)
 
-  status = signal<string>('')
-  version = signal<string>('')
-  uptime = signal<string>('')
+  readonly status = signal<string>('')
+  readonly version = signal<string>('')
+  readonly uptime = signal<string>('')
 
   ngOnInit() {
     this.healthService
diff --git a/src/app/components/login-form/login-form.ts b/src/app/components/login-form/login-form.ts
@@ -29,9 +29,9 @@ import { MatProgressBar } from '@angular/material/progress-bar'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginForm {
-  readonly authService = inject(AuthService)
-  readonly router = inject(Router)
-  readonly destroyRef = inject(DestroyRef)
+  private readonly authService = inject(AuthService)
+  private readonly router = inject(Router)
+  private readonly destroyRef = inject(DestroyRef)
 
   readonly isLoading = signal<boolean>(false)
 
diff --git a/src/app/components/nav/nav.component.ts b/src/app/components/nav/nav.component.ts
@@ -30,25 +30,24 @@ import { AuthService } from '../../services/auth-service'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavComponent implements OnInit {
-  private breakpointObserver = inject(BreakpointObserver)
-  private titleService = inject(TitleService)
-  private authService = inject(AuthService)
-  private destroyRef = inject(DestroyRef)
-  private sideNav = viewChild<MatSidenav>('drawer')
+  private readonly breakpointObserver = inject(BreakpointObserver)
+  private readonly titleService = inject(TitleService)
+  private readonly authService = inject(AuthService)
+  private readonly destroyRef = inject(DestroyRef)
+  private readonly sideNav = viewChild<MatSidenav>('drawer')
+  private readonly router = inject(Router)
 
-  currentTitle = toSignal(this.titleService.$currentTitle)
-  currentSubtitle = toSignal(this.titleService.$currentSubtitle)
+  readonly currentTitle = toSignal(this.titleService.$currentTitle)
+  readonly currentSubtitle = toSignal(this.titleService.$currentSubtitle)
 
-  isHandset = signal<boolean>(false)
+  readonly isHandset = signal<boolean>(false)
 
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     tap((result) => this.isHandset.set(result.matches)),
     map((result) => result.matches),
     shareReplay(),
   )
 
-  private readonly router = inject(Router)
-
   menuItems: { title: string; icon?: string; url: string }[] = [
     { title: 'Articles', url: '/articles', icon: 'library_books' },
     { title: 'Bookmarks', url: '/bookmarks', icon: 'bookmark' },
diff --git a/src/app/components/page-display-toggle/page-display-toggle.ts b/src/app/components/page-display-toggle/page-display-toggle.ts
@@ -13,8 +13,8 @@ import { MatIconButton } from '@angular/material/button'
   styleUrl: './page-display-toggle.css',
 })
 export class PageDisplayToggle {
-  pageService = inject(PageService, { skipSelf: true })
-  display = this.pageService.$display
+  private readonly pageService = inject(PageService, { skipSelf: true })
+  readonly display = this.pageService.$display
   protected readonly PageDisplay = PageDisplay
 
   toggleDisplay(display: PageDisplay) {
diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts
@@ -12,9 +12,9 @@ import { AsyncPipe } from '@angular/common'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Paginator {
-  readonly pageService = inject(PageService, { skipSelf: true })
-  readonly totalResults = this.pageService.$totalResults
-  readonly pageSize = this.pageService.$pageSize
+  private readonly pageService = inject(PageService, { skipSelf: true })
+  public readonly totalResults = this.pageService.$totalResults
+  public readonly pageSize = this.pageService.$pageSize
 
   readonly pageChange = output<PageEvent>()
   readonly hidden = input<boolean>(false)
diff --git a/src/app/components/signup-form/signup-form.ts b/src/app/components/signup-form/signup-form.ts
@@ -32,11 +32,11 @@ import { MatProgressBarModule } from '@angular/material/progress-bar'
   styleUrl: './signup-form.css',
 })
 export class SignupForm {
-  authService = inject(AuthService)
-  router = inject(Router)
-  destroyRef = inject(DestroyRef)
+  private readonly authService = inject(AuthService)
+  private readonly router = inject(Router)
+  private readonly destroyRef = inject(DestroyRef)
 
-  isLoading = signal<boolean>(false)
+  readonly isLoading = signal<boolean>(false)
 
   password = new FormControl('', {
     validators: [Validators.required, Validators.minLength(8), Validators.maxLength(30)],
diff --git a/src/app/components/subscription-add-form/subscription-add-form.ts b/src/app/components/subscription-add-form/subscription-add-form.ts
@@ -25,10 +25,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SubscriptionAddForm {
-  readonly fb = inject(NonNullableFormBuilder)
-  readonly feedService = inject(FeedService)
-  readonly destroyRef = inject(DestroyRef)
-  readonly dialogRef = inject(MatDialogRef<SubscriptionAddForm>)
+  private readonly fb = inject(NonNullableFormBuilder)
+  private readonly feedService = inject(FeedService)
+  private readonly destroyRef = inject(DestroyRef)
+  private readonly dialogRef = inject(MatDialogRef<SubscriptionAddForm>)
 
   readonly isLoading = signal<boolean>(false)
   readonly errorMessage = signal<string | null>(null)
diff --git a/src/app/components/subscription-edit-form/subscription-edit-form.ts b/src/app/components/subscription-edit-form/subscription-edit-form.ts
@@ -26,14 +26,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SubscriptionEditForm implements OnInit {
-  readonly fb = inject(NonNullableFormBuilder)
-  readonly feedService = inject(FeedService)
-  readonly destroyRef = inject(DestroyRef)
-  readonly dialogRef = inject(MatDialogRef<SubscriptionEditForm>)
+  private readonly fb = inject(NonNullableFormBuilder)
+  private readonly feedService = inject(FeedService)
+  private readonly destroyRef = inject(DestroyRef)
+  private readonly dialogRef = inject(MatDialogRef<SubscriptionEditForm>)
 
-  data: { feed: Feed; feedId: string } | null = inject(MAT_DIALOG_DATA)
-  isLoading = signal<boolean>(false)
-  errorMessage = signal<string | null>(null)
+  readonly data: { feed: Feed; feedId: string } | null = inject(MAT_DIALOG_DATA)
+  readonly isLoading = signal<boolean>(false)
+  readonly errorMessage = signal<string | null>(null)
 
   form = this.fb.group({
     title: ['', Validators.required],
diff --git a/src/app/pages/article-page/article-page.ts b/src/app/pages/article-page/article-page.ts
@@ -41,15 +41,11 @@ export class ArticlePage implements OnInit {
   private readonly domSanitizer = inject(DomSanitizer)
 
   readonly article = signal<Article | null>(null)
-
   readonly fullText = signal<SafeHtml | undefined>(undefined)
-
   readonly favTagId = signal<string>('')
-
   readonly readStatus = computed<boolean>(() => {
     return !!this.article()?.read
   })
-
   readonly isLoading = signal<boolean>(false)
 
   safeHtml(html?: string): SafeHtml | undefined {
diff --git a/src/app/pages/articles-page/articles-page.ts b/src/app/pages/articles-page/articles-page.ts
@@ -42,28 +42,26 @@ import { SortOrder } from '../../entities/base/base.enums'
   styleUrl: './articles-page.css',
 })
 export class ArticlesPage implements OnInit {
-  feedService = inject(FeedService)
-  router = inject(Router)
-  route = inject(ActivatedRoute)
-  destroyRef = inject(DestroyRef)
-  tagService = inject(TagService)
-  titleService = inject(TitleService)
-  pageService = inject(PageService)
-
-  articles = signal<Article[]>([])
-  articleIds = computed(() => this.articles().map(({ _id }) => _id))
+  private readonly feedService = inject(FeedService)
+  private readonly router = inject(Router)
+  private readonly route = inject(ActivatedRoute)
+  private readonly destroyRef = inject(DestroyRef)
+  private readonly tagService = inject(TagService)
+  private readonly titleService = inject(TitleService)
+  private readonly pageService = inject(PageService)
+
+  readonly articles = signal<Article[]>([])
+  readonly articleIds = computed(() => this.articles().map(({ _id }) => _id))
+  readonly favTagId = signal<string>('')
+  readonly userTags = signal<Tag[]>([])
+  readonly isRefreshingAll = signal<boolean>(false)
 
   $readFilter = new BehaviorSubject(true)
   $favFilter = new BehaviorSubject(false)
   $subscriptionFilter = new BehaviorSubject<string | null>(null)
   $tagFilter = new BehaviorSubject<string | null>(null)
   $dateOrder = new BehaviorSubject(SortOrder.Desc)
 
-  favTagId = signal<string>('')
-  userTags = signal<Tag[]>([])
-
-  isRefreshingAll = signal<boolean>(false)
-
   ngOnInit() {
     this.tagService
       .getAllTags({})
diff --git a/src/app/pages/auth-page/auth-page.component.ts b/src/app/pages/auth-page/auth-page.component.ts
@@ -27,7 +27,7 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrl: './auth-page.component.css',
 })
 export class AuthPage {
-  private bottomSheet = inject(MatBottomSheet)
+  private readonly bottomSheet = inject(MatBottomSheet)
 
   showAppHealth() {
     this.bottomSheet.open(HealthStatus)
diff --git a/src/app/pages/bookmarks-page/bookmarks-page.ts b/src/app/pages/bookmarks-page/bookmarks-page.ts
@@ -20,11 +20,11 @@ import { PageDisplayToggle } from '../../components/page-display-toggle/page-dis
   styleUrl: './bookmarks-page.css',
 })
 export class BookmarksPage implements OnInit {
-  feedService = inject(FeedService)
-  destroyRef = inject(DestroyRef)
-  tagService = inject(TagService)
-  pageService = inject(PageService)
-  titleService = inject(TitleService)
+  private readonly feedService = inject(FeedService)
+  private readonly destroyRef = inject(DestroyRef)
+  private readonly tagService = inject(TagService)
+  private readonly pageService = inject(PageService)
+  private readonly titleService = inject(TitleService)
 
   articles = signal<Article[]>([])
 
diff --git a/src/app/pages/subscriptions-page/subscriptions-page.ts b/src/app/pages/subscriptions-page/subscriptions-page.ts
@@ -49,16 +49,15 @@ export class SubscriptionsPage implements OnInit {
     })
   }
 
-  readonly feedService = inject(FeedService)
-  readonly pageService = inject(PageService)
-  readonly dialog = inject(MatDialog)
-  readonly destroyRef = inject(DestroyRef)
-  readonly titleService = inject(TitleService)
+  private readonly feedService = inject(FeedService)
+  private readonly pageService = inject(PageService)
+  private readonly dialog = inject(MatDialog)
+  private readonly destroyRef = inject(DestroyRef)
+  private readonly titleService = inject(TitleService)
 
-  feeds = signal<Feed[]>([])
-
-  isRefreshing = signal<Record<string, boolean>>({})
-  isRefreshingAll = signal<boolean>(false)
+  readonly feeds = signal<Feed[]>([])
+  readonly isRefreshing = signal<Record<string, boolean>>({})
+  readonly isRefreshingAll = signal<boolean>(false)
 
   ngOnInit(): void {
     combineLatest([this.pageService.$pageSize, this.pageService.$currentPage])
diff --git a/src/app/pages/tags-page/tags-page.ts b/src/app/pages/tags-page/tags-page.ts
@@ -32,14 +32,12 @@ export class TagsPage implements OnInit {
   private readonly errorSheet = inject(MatBottomSheet)
   private readonly dialog = inject(MatDialog)
 
-  readonly separatorKeysCodes = [ENTER, COMMA] as const
+  public readonly separatorKeysCodes = [ENTER, COMMA] as const
 
   private readonly tags = signal<Tag[]>([])
-
   readonly userTags = linkedSignal(() => {
     return this.tags().filter((t) => t.userId !== 'all')
   })
-
   readonly appTags = linkedSignal(() => {
     return this.tags().filter((t) => t.userId === 'all')
   })
diff --git a/src/app/pages/user-page/user-page.ts b/src/app/pages/user-page/user-page.ts
@@ -10,8 +10,9 @@ import { TitleService } from '../../services/title-service'
   styleUrl: './user-page.css',
 })
 export class UserPage implements OnInit {
-  authService = inject(AuthService)
-  titleService = inject(TitleService)
+  private readonly authService = inject(AuthService)
+  private readonly titleService = inject(TitleService)
+
   $currentUser = this.authService.$authStatus
 
   ngOnInit() {

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@`
`58`	`58`	`"budgets": [`
`59`	`59`	`{`
`60`	`60`	`"type": "initial",`
`61`		`- "maximumWarning": "500kB",`
	`61`	`+ "maximumWarning": "1000kB",`
`62`	`62`	`"maximumError": "1MB"`
`63`	`63`	`},`
`64`	`64`	`{`