refactor: fix a number of typos throughout the codebase (#52826)

ranma42 · thePunderWoman · commit ecbb47b2084c · 2024-01-25T22:54:59.000Z
Fix several typos, mostly in the `adev` site. PR Close #52826
diff --git a/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.scss b/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.scss
@@ -64,7 +64,7 @@
   }
 }
 
-// seconday nav - translated on x to display levels
+// secondary nav - translated on x to display levels
 .adev-nav-secondary {
   display: flex;
   flex-direction: row;
diff --git a/adev/src/app/core/services/theme-manager.service.ts b/adev/src/app/core/services/theme-manager.service.ts
@@ -38,13 +38,13 @@ export class ThemeManager {
     }
 
     this.loadThemePreference();
-    this.watchPreferedColorScheme();
+    this.watchPreferredColorScheme();
   }
 
   setTheme(theme: Theme): void {
     this.theme.set(theme);
     this.setThemeInLocalStorage();
-    this.setThemeBodyClasses(theme === 'auto' ? preferedScheme() : theme);
+    this.setThemeBodyClasses(theme === 'auto' ? preferredScheme() : theme);
   }
 
   // 1. Read theme preferences stored in localStorage
@@ -54,7 +54,7 @@ export class ThemeManager {
     const useTheme = savedUserPreference ?? 'auto';
 
     this.theme.set(useTheme);
-    this.setThemeBodyClasses(useTheme === 'auto' ? preferedScheme() : useTheme);
+    this.setThemeBodyClasses(useTheme === 'auto' ? preferredScheme() : useTheme);
   }
 
   // Set theme classes on the body element
@@ -81,14 +81,14 @@ export class ThemeManager {
     }
   }
 
-  private watchPreferedColorScheme() {
+  private watchPreferredColorScheme() {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
-      const preferedScheme = event.matches ? 'dark' : 'light';
-      this.setThemeBodyClasses(preferedScheme);
+      const preferredScheme = event.matches ? 'dark' : 'light';
+      this.setThemeBodyClasses(preferredScheme);
     });
   }
 }
 
-function preferedScheme(): 'dark' | 'light' {
+function preferredScheme(): 'dark' | 'light' {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
diff --git a/adev/src/app/editor/code-editor/extensions/tooltip.ts b/adev/src/app/editor/code-editor/extensions/tooltip.ts
@@ -66,7 +66,7 @@ export const getTooltipExtension = (
             dom: tooltip,
 
             // Note: force the tooltip to scroll to the top on mount and on position change
-            // because depending on the position of the mouse and the siez of the tooltip content,
+            // because depending on the position of the mouse and the size of the tooltip content,
             // the tooltip might render with its initial scroll position on the bottom
             mount: (_) => forceTooltipScrollTop(),
             positioned: (_) => forceTooltipScrollTop(),
diff --git a/adev/src/app/editor/embedded-editor.component.html b/adev/src/app/editor/embedded-editor.component.html
@@ -16,7 +16,7 @@
     </as-split-area>
 
     <as-split-area [size]="50">
-      <!-- Preview, Termnial & Console -->
+      <!-- Preview, Terminal & Console -->
       @if (!displayOnlyTerminal()) {
       <as-split class="adev-right-side" direction="vertical" restrictMove="true" gutterSize="5">
         <!-- Preview Section: for larger screens -->
diff --git a/adev/src/app/editor/node-runtime-sandbox.service.ts b/adev/src/app/editor/node-runtime-sandbox.service.ts
@@ -26,7 +26,7 @@ export const DEV_SERVER_READY_MSG = 'Watch mode enabled. Watching for file chang
 export const OUT_OF_MEMORY_MSG = 'Out of memory';
 
 const enum PROCESS_EXIT_CODE {
-  SUCCESS = 0, // process exited succesfully
+  SUCCESS = 0, // process exited successfully
   ERROR = 10, // process exited with error
   SIGTERM = 143, // 143 = gracefully terminated by SIGTERM, e.g. Ctrl + C
 }
@@ -73,7 +73,7 @@ export class NodeRuntimeSandbox {
   }
 
   async init(): Promise<void> {
-    // Note: the error state can already be set when loading the NodeRuntimeSanbox
+    // Note: the error state can already be set when loading the NodeRuntimeSandbox
     // in an unsupported environment.
     if (this.nodeRuntimeState.error()) {
       return;
@@ -155,7 +155,7 @@ export class NodeRuntimeSandbox {
    * Initialize the WebContainer for an Angular project
    */
   private async initProject(): Promise<void> {
-    // prevent re-initializion
+    // prevent re-initialization
     if (this._isProjectInitialized()) return;
 
     // clean up the sandbox if it was initialized before so that the CLI can
@@ -230,7 +230,7 @@ export class NodeRuntimeSandbox {
    * Initialize the WebContainer for the Angular CLI
    */
   private async initAngularCli() {
-    // prevent re-initializion
+    // prevent re-initialization
     if (this._isAngularCliInitialized()) return;
 
     // clean up the sandbox if a project was initialized before so the CLI can
@@ -292,7 +292,7 @@ export class NodeRuntimeSandbox {
 
     const terminal = this.terminalHandler.interactiveTerminalInstance;
 
-    // use WebContainer spawn directly so that the proccess isn't killed on
+    // use WebContainer spawn directly so that the process isn't killed on
     // cleanup
     const shellProcess = await webContainer.spawn('bash');
 
@@ -516,10 +516,10 @@ export class NodeRuntimeSandbox {
 
   /**
    * Kill existing processes and remove files from the WebContainer
-   * when switching tutorials that have diferent requirements
+   * when switching tutorials that have different requirements
    */
   private async cleanup() {
-    // await the proccess to be killed before removing the files because
+    // await the process to be killed before removing the files because
     // a process can create files during the promise
     await this.killExistingProcesses();
     await this.removeFiles();
diff --git a/adev/src/app/editor/typings-loader.service.ts b/adev/src/app/editor/typings-loader.service.ts
@@ -80,7 +80,7 @@ export class TypingsLoader {
         .readFile(`./node_modules/${library}/package.json`, 'utf-8')
         .catch((error) => {
           // Note: "ENOENT" errors occurs:
-          //    - While reseting the NodeRuntimeSandbox.
+          //    - While resetting the NodeRuntimeSandbox.
           //    - When the library is not a dependency in the project, its package.json won't exist.
           //
           // In both cases we ignore the error to continue the process.
diff --git a/adev/src/app/features/tutorial/tutorial-navigation.scss b/adev/src/app/features/tutorial/tutorial-navigation.scss
@@ -1,6 +1,6 @@
 @use '@angular/docs/styles/media-queries' as mq;
 
-// horizozntal tutorial nav bar
+// horizontal tutorial nav bar
 .adev-tutorial-nav-container {
   position: sticky;
   top: 0;
diff --git a/adev/src/content/examples/forms-overview/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/forms-overview/e2e/src/app.e2e-spec.ts
@@ -1,6 +1,6 @@
 import { AppPage } from './app.po';
 
-describe('forms-overvoew App', () => {
+describe('forms-overview App', () => {
   let page: AppPage;
 
   beforeEach(() => {
diff --git a/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.html b/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.html
@@ -1,4 +1,4 @@
 <div class="section">
 	<h2>&commat;Optional() Component</h2>
-	<p>This component still works even though the OptionalService (notice &commat;Optional() in the consturctor isn't provided or configured anywhere. Angular goes through tree and visibilty rules, and if it doesn't find the requested service, returns null.</p>
+	<p>This component still works even though the OptionalService (notice &commat;Optional() in the constructor isn't provided or configured anywhere. Angular goes through tree and visibility rules, and if it doesn't find the requested service, returns null.</p>
 </div>
diff --git a/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts b/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts
@@ -1,4 +1,4 @@
-// TODO: Feature Componetized like HeroCenter
+// TODO: Feature Componentized like HeroCenter
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
diff --git a/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts b/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-// TODO: Feature Componetized like CrisisCenter
+// TODO: Feature Componentized like CrisisCenter
 // #docregion rxjs-imports
 import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts
@@ -41,7 +41,7 @@ describe('Lazy Loading AngularJS Tests', () => {
 
   // Workaround for https://github.com/angular/protractor/issues/4724
   async function loadAngularJS() {
-    // Abort if `resumeBootstrap` has already occured
+    // Abort if `resumeBootstrap` has already occurred
     if (await browser.executeScript(`return '__TESTABILITY__NG1_APP_ROOT_INJECTOR__' in window;`)) {
         return;
     }
diff --git a/adev/src/content/guide/components/lifecycle.md b/adev/src/content/guide/components/lifecycle.md
@@ -259,7 +259,7 @@ export class UserProfile {
       nativeElement.style.padding = computePadding();
     }, {phase: AfterRenderPhase.Write});
 
-    // Use the `Read` phase to read geometric properties after all writes have occured.
+    // Use the `Read` phase to read geometric properties after all writes have occurred.
     afterNextRender(() => {
       this.elementHeight = nativeElement.getBoundingClientRect().height;
     }, {phase: AfterRenderPhase.Read});
diff --git a/adev/src/content/guide/forms/template-driven-forms.md b/adev/src/content/guide/forms/template-driven-forms.md
@@ -5,7 +5,7 @@ This tutorial shows you how to create a template-driven form. The control elemen
 Template-driven forms use [two-way data binding](guide/templates/two-way-binding) to update the data model in the component as changes are made in the template and vice versa.
 
 <docs-callout helpful title="Template vs Reactive forms">
-Angular supports two design approaches for interactive forms. Template-driven forms allow you to use form-specific directives in your Angular template.Reactive forms provide a model-driven approach to buildin forms.
+Angular supports two design approaches for interactive forms. Template-driven forms allow you to use form-specific directives in your Angular template.Reactive forms provide a model-driven approach to building forms.
 
 Template-driven forms are a great choice for small or simple forms, while reactive forms are more scalable and suitable for complex forms. For a comparison of the two approaches, see [Choosing an approach](guide/forms#choosing-an-approach)
 </docs-callout>
diff --git a/adev/src/content/kitchen-sink.md b/adev/src/content/kitchen-sink.md
@@ -7,7 +7,7 @@ As a design system, this page contains visual and Markdown authoring guidance fo
 * Custom Angular docs elements: [`docs-card`](#cards), [`docs-callout`](#callouts), [`docs-pill`](#pills), and [`docs-steps`](#workflow)
 * Custom text elements: [alerts](#alerts)
 * Code examples: [`docs-code`](#code)
-* Built-in Markdown styled elements: links, lists, [headers](#headers), [horizonal lines](#horizontal-line-divider), [tables](#tables)
+* Built-in Markdown styled elements: links, lists, [headers](#headers), [horizontal lines](#horizontal-line-divider), [tables](#tables)
 * and more!
 
 Get ready to:
diff --git a/adev/src/content/reference/press-kit.md b/adev/src/content/reference/press-kit.md
@@ -4,8 +4,8 @@ The logo graphics available for download on this page are provided under [CC BY
 
 <docs-card-container>
   <docs-card title="Angular logos" href="https://drive.google.com/drive/folders/1IgcAwLDVZUz8ycnFa7T4_H6B4V4LhYUQ?usp=sharing" link="Download from Google Drive">
-    ![Angular workmark gradient logo](./images/press-kit/angular_wordmark_gradient.png "Angular workmark gradient logo")
-    ![Angular workmark white logo](./images/press-kit/angular_wordmark_white.png "Angular workmark white logo")
+    ![Angular wordmark gradient logo](./images/press-kit/angular_wordmark_gradient.png "Angular wordmark gradient logo")
+    ![Angular wordmark white logo](./images/press-kit/angular_wordmark_white.png "Angular wordmark white logo")
     ![Angular wordmark black logo](./images/press-kit/angular_wordmark_black.png "Angular wordmark black logo")
     Black and white are the default color variations and should be used in most circumstances. A gradient version of the icon and lockup is available in both static and animated formats and can be used in cases where a color icon is required.
   </docs-card>
diff --git a/adev/src/index.html b/adev/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- We set all theme clases to allow critters to inline the theme styles and prevent flickering -->
+<!-- We set all theme classes to allow critters to inline the theme styles and prevent flickering -->
 <html lang="en" class="adev-dark-mode adev-light-mode">
   <head>
     <script>
diff --git a/aio/content/blocks/core/defer.md b/aio/content/blocks/core/defer.md
@@ -14,7 +14,7 @@ A type of [block](api/core/defer) that can be used to defer load the JavaScript
   <img alt="loading image" src="loading.gif" />
 } @error {
   <!-- error template fragment -->
-  <p>An loading error occured</p>
+  <p>An loading error occurred</p>
 }
 ```
 
diff --git a/aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts b/aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts
@@ -1,6 +1,6 @@
 import { AppPage } from './app.po';
 
-describe('forms-overvoew App', () => {
+describe('forms-overview App', () => {
   let page: AppPage;
 
   beforeEach(() => {
diff --git a/aio/content/examples/resolution-modifiers/src/app/optional/optional.component.html b/aio/content/examples/resolution-modifiers/src/app/optional/optional.component.html
@@ -1,4 +1,4 @@
 <div class="section">
 	<h2>&#64;Optional() Component</h2>
-	<p>This component still works even though the OptionalService (notice &#64;Optional() in the consturctor isn't provided or configured anywhere. Angular goes through tree and visibilty rules, and if it doesn't find the requested service, returns null.</p>
+	<p>This component still works even though the OptionalService (notice &#64;Optional() in the constructor isn't provided or configured anywhere. Angular goes through tree and visibility rules, and if it doesn't find the requested service, returns null.</p>
 </div>
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts
@@ -1,4 +1,4 @@
-// TODO: Feature Componetized like HeroCenter
+// TODO: Feature Componentized like HeroCenter
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-// TODO: Feature Componetized like CrisisCenter
+// TODO: Feature Componentized like CrisisCenter
 // #docregion rxjs-imports
 import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
diff --git a/aio/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts b/aio/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts
@@ -41,7 +41,7 @@ describe('Lazy Loading AngularJS Tests', () => {
 
   // Workaround for https://github.com/angular/protractor/issues/4724
   async function loadAngularJS() {
-    // Abort if `resumeBootstrap` has already occured
+    // Abort if `resumeBootstrap` has already occurred
     if (await browser.executeScript(`return '__TESTABILITY__NG1_APP_ROOT_INJECTOR__' in window;`)) {
         return;
     }
diff --git a/aio/content/images/guide/dependency-injection/injectors.svg b/aio/content/images/guide/dependency-injection/injectors.svg
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/index.ts b/packages/core/schematics/ng-generate/control-flow-migration/index.ts
diff --git a/tools/manual_api_docs/blocks/defer.md b/tools/manual_api_docs/blocks/defer.md

Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@`
`64`	`64`	`}`
`65`	`65`	`}`
`66`	`66`
`67`		`-// seconday nav - translated on x to display levels`
	`67`	`+// secondary nav - translated on x to display levels`
`68`	`68`	`.adev-nav-secondary {`
`69`	`69`	`display: flex;`
`70`	`70`	`flex-direction: row;`
Original file line number	Diff line number	Diff line change
`@@ -38,13 +38,13 @@ export class ThemeManager {`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`this.loadThemePreference();`
`41`		`- this.watchPreferedColorScheme();`
	`41`	`+ this.watchPreferredColorScheme();`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`setTheme(theme: Theme): void {`
`45`	`45`	`this.theme.set(theme);`
`46`	`46`	`this.setThemeInLocalStorage();`
`47`		`- this.setThemeBodyClasses(theme === 'auto' ? preferedScheme() : theme);`
	`47`	`+ this.setThemeBodyClasses(theme === 'auto' ? preferredScheme() : theme);`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`// 1. Read theme preferences stored in localStorage`
`@@ -54,7 +54,7 @@ export class ThemeManager {`
`54`	`54`	`const useTheme = savedUserPreference ?? 'auto';`
`55`	`55`
`56`	`56`	`this.theme.set(useTheme);`
`57`		`- this.setThemeBodyClasses(useTheme === 'auto' ? preferedScheme() : useTheme);`
	`57`	`+ this.setThemeBodyClasses(useTheme === 'auto' ? preferredScheme() : useTheme);`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`// Set theme classes on the body element`
`@@ -81,14 +81,14 @@ export class ThemeManager {`
`81`	`81`	`}`
`82`	`82`	`}`
`83`	`83`
`84`		`- private watchPreferedColorScheme() {`
	`84`	`+ private watchPreferredColorScheme() {`
`85`	`85`	`window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {`
`86`		`- const preferedScheme = event.matches ? 'dark' : 'light';`
`87`		`- this.setThemeBodyClasses(preferedScheme);`
	`86`	`+ const preferredScheme = event.matches ? 'dark' : 'light';`
	`87`	`+ this.setThemeBodyClasses(preferredScheme);`
`88`	`88`	`});`
`89`	`89`	`}`
`90`	`90`	`}`
`91`	`91`
`92`		`-function preferedScheme(): 'dark' \| 'light' {`
	`92`	`+function preferredScheme(): 'dark' \| 'light' {`
`93`	`93`	`return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';`
`94`	`94`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// TODO: Feature Componetized like HeroCenter`
	`1`	`+// TODO: Feature Componentized like HeroCenter`
`2`	`2`	`import { Component, OnInit } from '@angular/core';`
`3`	`3`	`import { Observable } from 'rxjs';`
`4`	`4`