SF-3603 Convert to angular standalone components

[siltomato]

This PR refactors the app to use standalone components and modern Angular provider patterns. Also AppModule and main.ts are migrated to the new Angular standalone bootstrapping API.

Used migration script ng g @angular/core:standalone with all three modes:

1. Convert declarations to standalone.
2. Remove unnecessary NgModules.
3. Switch to standalone bootstrapping API.

Afterwards, manual migrations were needed, following these principles:

Provider functions over Modules

• Used provideX() functions returning Provider[] or EnvironmentProviders instead of Angular modules (@NgModule)
• Examples: provideI18nStory(), provideRouter(), provideTestRealtime()

Individual Directive/Pipe imports

• Replaced CommonModule imports with specific directives: AsyncPipe, NgClass, KeyValuePipe (import only what's actually used in the component template)

Routing configuration

• Used provideRouter(routes) in providers array instead of RouterModule.forRoot() or RouterModule.forChild() in imports

Test Module wrapper elimination

• Removed wrapper @NgModule test classes (e.g., TestModule, DialogTestModule)
• Imported dependencies directly in configureTestingModule() imports array

---

This change is 

[codecov]

Codecov Report

❌ Patch coverage is 90.00000% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.47%. Comparing base (6c0ebdf) to head (836e65f).
⚠️ Report is 1 commits behind head on master.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...te/editor/lynx/insights/lynx-insights-providers.ts	71.42%	2 Missing ⚠️
...draft-apply-dialog/draft-apply-dialog.component.ts	87.50%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3535      +/-   ##
==========================================
+ Coverage   82.21%   82.47%   +0.25%     
==========================================
  Files         615      605      -10     
  Lines       37015    36866     -149     
  Branches     6060     6043      -17     
==========================================
- Hits        30433    30406      -27     
+ Misses       5678     5568     -110     
+ Partials      904      892      -12     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[pmachapman]

This review has turned out to be more epic than I initially thought! I'm submitting a partial review of what I have so far.

Also, I noticed that these two files need to be updated to remove standalone: true and standalone: false:

• src/SIL.XForge.Scripture/ClientApp/src/app/shared/json-viewer/json-viewer.component.ts
• src/SIL.XForge.Scripture/ClientApp/src/app/shared/json-viewer/json-viewer.component.spec.ts

@pmachapman reviewed 203 of 305 files at r1, all commit messages.
Reviewable status: 203 of 305 files reviewed, 4 unresolved discussions

---

src/SIL.XForge.Scripture/ClientApp/src/app/my-projects/my-projects.stories.ts line 195 at r1 (raw file):

      imports: [
        UICommonModule,
        SharedModule.forRoot(),

I think that the change to the chromatic tests is from this removal. (I don't think we should add provideUICommon() - I just wanted to flag what I think the possible cause is)

Code quote:

        UICommonModule,
        SharedModule.forRoot(),

---

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/job-events-dialog.component.ts line 39 at r1 (raw file):

  imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatIcon, JsonViewerComponent]
})
export class JobEventsDialogComponent {

RE: Your merge conflict, this class is now JobDetailsDialogComponent (job-details-dialog.component.ts)

Code quote:

export class JobEventsDialogComponent {

---

src/SIL.XForge.Scripture/ClientApp/src/app/event-metrics/event-metric-dialog.component.html line 2 at r1 (raw file):

<ng-container *transloco="let t; read: 'event_metric_dialog'">
  <div [dir]="i18n.direction">

I'm guessing this was changed because <mat-dialog> is not a valid tag?

I did a quick search and this tag is still being used in:

• src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-confirmation-dialog/import-questions-confirmation-dialog.component.html
• src/SIL.XForge.Scripture/ClientApp/src/app/settings/delete-project-dialog/delete-project-dialog.component.html

Code quote:

<div [dir]="i18n.direction">

---

src/SIL.XForge.Scripture/ClientApp/.storybook/preview.ts line 13 at r1 (raw file):

import docJson from '../documentation.json';
import { provideSFTabs } from '../src/app/shared/sf-tab-group';
import { provideUICommon } from '../src/xforge-common/ui-common-providers';

NIT: This should be:

import { provideUICommon } from 'xforge-common/ui-common-providers';

Code quote:

import { provideUICommon } from '../src/xforge-common/ui-common-providers';

---

src/SIL.XForge.Scripture/ClientApp/src/main.ts line 10 at r1 (raw file):

} from '@angular/core';

import { ExceptionHandlingService } from 'xforge-common/exception-handling.service';

NIT: If the new lines are removed from above and below this line, the imports will sort correctly.

Suggestion:

import { ExceptionHandlingService } from 'xforge-common/exception-handling.service';

[siltomato]

Reviewable status: 203 of 305 files reviewed, 2 unresolved discussions (waiting on @pmachapman)

---

src/SIL.XForge.Scripture/ClientApp/.storybook/preview.ts line 13 at r1 (raw file):

Previously, pmachapman (Peter Chapman) wrote…

NIT: This should be:

import { provideUICommon } from 'xforge-common/ui-common-providers';

Done.

---

src/SIL.XForge.Scripture/ClientApp/src/main.ts line 10 at r1 (raw file):

Previously, pmachapman (Peter Chapman) wrote…

NIT: If the new lines are removed from above and below this line, the imports will sort correctly.

Done.

---

src/SIL.XForge.Scripture/ClientApp/src/app/event-metrics/event-metric-dialog.component.html line 2 at r1 (raw file):

Previously, pmachapman (Peter Chapman) wrote…

I'm guessing this was changed because <mat-dialog> is not a valid tag?

I did a quick search and this tag is still being used in:

• src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-confirmation-dialog/import-questions-confirmation-dialog.component.html
• src/SIL.XForge.Scripture/ClientApp/src/app/settings/delete-project-dialog/delete-project-dialog.component.html

Good catch, thanks!

---

src/SIL.XForge.Scripture/ClientApp/src/app/my-projects/my-projects.stories.ts line 195 at r1 (raw file):

Previously, pmachapman (Peter Chapman) wrote…

I think that the change to the chromatic tests is from this removal. (I don't think we should add provideUICommon() - I just wanted to flag what I think the possible cause is)

Yeah, maybe it is related to removal of UICommonModule, although provideUICommon() is now being applied to all stories via preview.ts.

---

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/job-events-dialog.component.ts line 39 at r1 (raw file):

Previously, pmachapman (Peter Chapman) wrote…

RE: Your merge conflict, this class is now JobDetailsDialogComponent (job-details-dialog.component.ts)

Thanks for the heads up!

[pmachapman]

Just a couple more nits!

@pmachapman reviewed 102 of 305 files at r1, 10 of 10 files at r2, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @siltomato)

---

src/SIL.XForge.Scripture/ClientApp/src/app/translate/training-progress/training-progress.component.ts line 11 at r2 (raw file):

import { quietTakeUntilDestroyed } from 'xforge-common/util/rxjs-util';

import { MatIconButton } from '@angular/material/button';

NIT: Are you able to remove the line break here to help sorting?

Code quote:

import { quietTakeUntilDestroyed } from 'xforge-common/util/rxjs-util';

import { MatIconButton } from '@angular/material/button';

---

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/tabs/editor-tab-add-resource-dialog/editor-tab-add-resource-dialog.component.spec.ts line 5 at r2 (raw file):

import { provideAnimations } from '@angular/platform-browser/animations';

import { SFProject } from 'realtime-server/lib/esm/scriptureforge/models/sf-project';

NIT: Are you able to remove the line break here to help sorting?

Code quote:

import { provideAnimations } from '@angular/platform-browser/animations';

import { SFProject } from 'realtime-server/lib/esm/scriptureforge/models/sf-project';

[siltomato]

Reviewable status: 291 of 310 files reviewed, all discussions resolved (waiting on @pmachapman)

---

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/tabs/editor-tab-add-resource-dialog/editor-tab-add-resource-dialog.component.spec.ts line 5 at r2 (raw file):

Previously, pmachapman (Peter Chapman) wrote…

NIT: Are you able to remove the line break here to help sorting?

Done.

---

src/SIL.XForge.Scripture/ClientApp/src/app/translate/training-progress/training-progress.component.ts line 11 at r2 (raw file):

Previously, pmachapman (Peter Chapman) wrote…

NIT: Are you able to remove the line break here to help sorting?

Done.

[pmachapman]

@pmachapman reviewed 21 of 21 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @siltomato)