docs(docs-infra): fix minor typos in angular.io (#47295) (#47295)

PR Close #47295 PR Close #47295
2026-09-14 13:54:52 +08:00 · 2022-08-30 16:34:53 +02:00
parent 4002f0121e
commit 223e27ef57
77 changed files with 128 additions and 128 deletions
@@ -65,7 +65,7 @@ serve the files in `dist/` with `yarn http-server dist -p 4200`.

 There are two types of content in the documentation:

-* **API docs**: descriptions of the modules, classes, interfaces, decorators, etc that make up the Angular platform.
+* **API docs**: descriptions of all that make up the Angular platform, such as the modules, classes, interfaces or decorators.
 API docs are generated directly from the source code.
 The source code is contained in TypeScript files, located in the `angular/packages` folder.
 Each API item may have a preceding comment, which contains JSDoc style tags and content.
@@ -26,7 +26,7 @@ you don't need to specify values for those.
  See also `AIO_GITHUB_TEAM_SLUGS`.

 - `AIO_GITHUB_REPO`:
-  The Github repository for which PRs will be hosted.
+  The GitHub repository for which PRs will be hosted.

 - `AIO_GITHUB_TEAM_SLUGS`:
  A comma-separated list of teams, whose authors are allowed to preview PRs.
@@ -3,9 +3,9 @@

 ## Objective
 Whenever a PR job is run on the CI infrastructure (e.g. CircleCI), we want to build `angular.io`
-and host the build artifacts on a publicly accessible server so that collaborators (developers,
-designers, authors, etc) can preview the changes without having to checkout and build the app
-locally.
+and host the build artifacts on a publicly accessible server so that collaborators, such as the
+developers, designers, or authors, can preview the changes without having to check out and build
+the app locally.


 ## Source code
@@ -57,7 +57,7 @@ More info on how to set things up on CI can be found [here](misc--integrate-with
  If the PR transitions from "non-public" to "public", the preview-server posts a comment on the
  corresponding PR on GitHub mentioning the SHAs and the links where the previews can be found.
 - The preview-server verifies that it is not trying to overwrite an existing build.
- The preview-server deploys the artifacts to a sub-directory named after the PR number and the
+- The preview-server deploys the artifacts to a subdirectory named after the PR number and the
  first few characters of the SHA: `<PR>/<SHA>/`
  (Non-publicly accessible PRs will be stored in a different location, but again derived from the PR
  number and SHA.)
@@ -89,7 +89,7 @@ More info on the possible HTTP status codes and their meaning can be found
 ### Serving build artifacts
 - nginx receives a request for a hosted preview resource on a subdomain corresponding to the PR and SHA.
  E.g.: `pr<PR>-<SHA>.ngbuilds.io/path/to/resource`
- nginx maps the subdomain to the correct sub-directory and serves the resource.
+- nginx maps the subdomain to the correct subdirectory and serves the resource.
  E.g.: `/<PR>/<SHA>/path/to/resource`

 More info on the possible HTTP status codes and their meaning can be found
@@ -19,7 +19,7 @@ along with a brief explanation of what they mean:
  segment).

 - **403 (Forbidden)**:
-  Trying to access a sub-directory.
+  Trying to access a subdirectory.

 - **404 (Not Found)**:
  File not found.
@@ -2,8 +2,8 @@


 Whenever a PR job is run on CircleCI, we want to build `angular.io` and host the build artifacts on
-a publicly accessible server so that collaborators (developers, designers, authors, etc) can preview
-the changes without having to checkout and build the app locally.
+a publicly accessible server so that collaborators, such as the developers, designers, or authors,
+can preview the changes without having to check out and build the app locally.

 This document discusses the security considerations associated with moving build artifacts as
 part of the CI process and serving them publicly.
@@ -136,7 +136,7 @@ This section describes how each of the aforementioned sub-tasks is accomplished:
 ## Assumptions / Things to keep in mind

 - Other than the initial webhook trigger, which provides a build number, all requests for data come
-  from the preview-server making requests to well defined API endpoints (e.g. CircleCI and Github).
+  from the preview-server making requests to well-defined API endpoints (e.g. CircleCI and Github).
  This means that any secret access keys need only be stored on the preview-server and not on any of
  the CI build infrastructure (e.g. CircleCI).

@@ -2,7 +2,7 @@


 ## The `docker run` command
-Once everything has been setup and configured, a docker container can be started with the following
+Once everything has been set up and configured, a docker container can be started with the following
 command:

 ```
@@ -14,7 +14,7 @@ NgModules can be declared with an `id`:
 export class MyModule {}
 ```

-Declaring an `id` makes the NgModule available for lookup via the `getNgModuleById()` operation. This functionality is rarely used, mainly in very specific bundling scenarios when lazily loading NgModules without obtaining direct references to them. In most Angular code, ES dynamic `import()` (`import('./path/to/module')`) should be used instead, as this provides a direct reference to the NgModule being loaded without the need for a global registration side-effect.
+Declaring an `id` makes the NgModule available for lookup via the `getNgModuleById()` operation. This functionality is rarely used, mainly in very specific bundling scenarios when lazily loading NgModules without obtaining direct references to them. In most Angular code, ES dynamic `import()` (`import('./path/to/module')`) should be used instead, as this provides a direct reference to the NgModule being loaded without the need for a global registration side effect.

 If you are not using `getNgModuleById`, you do not need to provide `id`s for your NgModules. Providing one has a significant drawback: it makes the NgModule non-tree-shakable, which can have an impact on your bundle size.

@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';

@Component({
-  selector: 'app-manage-hereos',
+  selector: 'app-manage-heroes',
  templateUrl: './manage-heroes.component.html',
  styleUrls: ['./manage-heroes.component.css']
 })
@@ -497,7 +497,7 @@ describe('demo (with TestBed):', () => {
      @Component({ template: '<my-service-comp></my-service-comp>' })
      class TestComponent { }

-      // 3 levels of ValueService provider: module, TestCompomponent, TestProvidersComponent
+      // 3 levels of ValueService provider: module, TestComponent, TestProvidersComponent
      const fixture = TestBed.configureTestingModule({
        declarations: [TestComponent, TestProvidersComponent],
        providers: [ValueService]
@@ -72,7 +72,7 @@ Extended diagnostics should generally:
 *   Detect a common, non-obvious developer mistake with Angular templates
 *   Clearly articulate why this pattern can lead to bugs or unintended behavior
 *   Suggest one or more clear solutions
-*   Have a low \(preferrably zero\) false-positive rate
+*   Have a low, preferably zero, false-positive rate
 *   Apply to the vast majority of Angular applications \(not specific to an unofficial library\)
 *   Improve program correctness or performance \(not style, that responsibility falls to a linter\)

@@ -127,7 +127,7 @@ The primary `package.json` contains important package metadata, including the fo
 *   It contains [keys](#legacy-resolution-keys) which define the available source code formats of the primary `@angular/core` entrypoint, for tools which do not understand `"exports"`.
    These keys are considered deprecated, and could be removed as the support for `"exports"` rolls out across the ecosystem.

-*   It declares whether the package contains [side-effects](#side-effects)
+*   It declares whether the package contains [side effects](#side-effects)

 ### ESM declaration

@@ -230,7 +230,7 @@ As with `"node"`, ES2015 code is selected due to the constraints of ZoneJS.

 ### Side effects

-The last function of `package.json` is to declare whether the package has [side-effects](#sideeffects-flag).
+The last function of `package.json` is to declare whether the package has [side effects](#sideeffects-flag).

 <code-example language="javascript">

@@ -273,7 +273,7 @@ Secondary entrypoints can be resolved via the `"exports"` field of the `package.

 ## README.md

-The README file in the markdown format that is used to display description of a package on npm and github.
+The README file in the Markdown format that is used to display description of a package on npm and GitHub.

 Example README content of &commat;angular/core package:

@@ -368,7 +368,7 @@ The end result of these optimizations should be smaller bundle size and better c
 This optimization can break your code if it contains non-local side-effects - this is however not common in Angular applications and it's usually a sign of bad design.
 The recommendation is for all packages to claim the side-effect free status by setting the `sideEffects` property to `false`, and that developers follow the [Angular Style Guide](https://angular.io/guide/styleguide) which naturally results in code without non-local side-effects.

-More info: [webpack docs on side-effects](https://github.com/webpack/webpack/tree/master/examples/side-effects)
+More info: [webpack docs on side effects](https://github.com/webpack/webpack/tree/master/examples/side-effects)

 ### ES2020 language level

@@ -148,7 +148,7 @@ The binding punctuation of `[]`, `()`, `[()]`, and the prefix specify the direct

 *   Use `[]` to bind from source to view
 *   Use `()` to bind from view to source
-*   Use `[()]` to bind in a two way sequence of view to source to view
+*   Use `[()]` to bind in a two-way sequence of view to source to view

 Place the expression or statement to the right of the equal sign within double quote \(`""`\) characters.
 For more information see [Interpolation](guide/interpolation) and [Template statements](guide/template-statements).
@@ -307,7 +307,7 @@ The CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure c
 You might find it necessary to target specific browsers or exclude certain browser versions from your build.

 Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/browserslist/browserslist) to figure out which browsers to support with prefixing.
-Browserlist looks for configuration options in a `browserslist` property of the package configuration file, or in a configuration file named `.browserslistrc`.
+Browserslist looks for configuration options in a `browserslist` property of the package configuration file, or in a configuration file named `.browserslistrc`.
 Autoprefixer looks for the `browserslist` configuration when it prefixes your CSS.

 *   Tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, `package.json`:
@@ -179,7 +179,7 @@ To add or remove an element, bind `*ngIf` to a condition expression such as `isA
 <code-example header="src/app/app.component.html" path="built-in-directives/src/app/app.component.html" region="NgIf-1"></code-example>

 When the `isActive` expression returns a truthy value, `NgIf` adds the `ItemDetailComponent` to the DOM.
-When the expression is falsy, `NgIf` removes the `ItemDetailComponent` from the DOM and disposes of the component and all of its sub-components.
+When the expression is falsy, `NgIf` removes the `ItemDetailComponent` from the DOM and disposes of the component and all of its subcomponents.

 For more information on `NgIf` and `NgIfElse`, see the [NgIf API documentation](api/common/NgIf).

@@ -204,7 +204,7 @@ In this example, Angular does not display the `nullCustomer` because it is `null
 Use the `NgFor` directive to present a list of items.

 1.  Define a block of HTML that determines how Angular renders a single item.
-1.  To list your items, assign the short hand `let item of items` to `*ngFor`.
+1.  To list your items, assign the shorthand `let item of items` to `*ngFor`.

 <code-example header="src/app/app.component.html" path="built-in-directives/src/app/app.component.html" region="NgFor-1"></code-example>

@@ -239,7 +239,7 @@ For more information about template input variables, see [Structural directive s

 Get the `index` of `*ngFor` in a template input variable and use it in the template.

-In the `*ngFor`, add a semicolon and `let i=index` to the short hand.
+In the `*ngFor`, add a semicolon and `let i=index` to the shorthand.
 The following example gets the `index` in a variable named `i` and displays it with the item name.

 <code-example header="src/app/app.component.html" path="built-in-directives/src/app/app.component.html" region="NgFor-3"></code-example>
@@ -271,7 +271,7 @@ With the `*ngFor` `trackBy` property, Angular can change and re-render only thos

    <code-example header="src/app/app.component.ts" path="built-in-directives/src/app/app.component.ts" region="trackByItems"></code-example>

-1.  In the short hand expression, set `trackBy` to the `trackByItems()` method.
+1.  In the shorthand expression, set `trackBy` to the `trackByItems()` method.

    <code-example header="src/app/app.component.html" path="built-in-directives/src/app/app.component.html" region="trackBy"></code-example>

@@ -445,7 +445,7 @@ Architect can support watch mode, but there are some things to look out for.
    This prevents Architect from stopping the builder if another run is scheduled.

 When your builder calls `BuilderRun.stop()` to exit watch mode, Architect unsubscribes from the builder's Observable and calls the builder's teardown logic to clean up.
-\(This behavior also allows for long running builds to be stopped and cleaned up.\)
+\(This behavior also allows for long-running builds to be stopped and cleaned up.\)

 In general, if your builder is watching an external event, you should separate your run into three phases.

@@ -140,7 +140,7 @@ If you need to animate the items of an `*ngFor` list and there is a possibility

 ## Animations and Component View Encapsulation

-Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](/guide/view-encapsulation) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they where using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` behaves differently as we'll discuss shortly).
+Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](/guide/view-encapsulation) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they were using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` behaves differently as we'll discuss shortly).

 For example if the `query()` function (which you'll see more of in the rest of the Animations guide) were to be applied at the top of a tree of components using the emulated view encapsulation, such query would be able to identify (and thus animate) DOM elements on any depth of the tree.

@@ -198,7 +198,7 @@ But it is limited because the parent-child wiring must be done entirely within t
 The parent component *itself* has no access to the child.

 You can't use the *local variable* technique if the parent component's *class* relies on the child component's *class*.
-The parent-child relationship of the components is not established within each components respective *class* with the *local variable* technique.
+The parent-child relationship of the components is not established within each component's respective *class* with the *local variable* technique.
 Because the *class* instances are not connected to one another, the parent *class* cannot access the child *class* properties and methods.

 When the parent component *class* requires that kind of access, ***inject*** the child component into the parent as a *ViewChild*.
@@ -248,7 +248,7 @@ Use [the same countdown timer tests](guide/component-interaction#countdown-tests

 ## Parent and children communicate using a service

-A parent component and its children share a service whose interface enables bi-directional communication *within the family*.
+A parent component and its children share a service whose interface enables bidirectional communication *within the family*.

 The scope of the service instance is the parent component and its children.
 Components outside this component subtree have no access to the service or their communications.
@@ -49,7 +49,7 @@ While Angular's emulated style encapsulation prevents styles from escaping a com
 While component consumers should avoid directly overwriting the CSS internals of a component, you can offer a supported customization API via a CSS preprocessor like Sass.

 For example, a component may offer one or more supported mixins to customize various aspects of the component's appearance.
-While this approach uses global styles in it's implementation, it allows the component author to keep the mixins up to date with changes to the component's private DOM structure and CSS classes.
+While this approach uses global styles in its implementation, it allows the component author to keep the mixins up to date with changes to the component's private DOM structure and CSS classes.

 #### 3. Customize with CSS `::part`

@@ -25,7 +25,7 @@ This section describes how to make larger contributions to the documentation.

 The following steps set up your local computer to contribute documentation content.

-1.  Sign into your account on GitHub.
+1.  Sign in to your account on GitHub.
    If you don't have an account on GitHub, [create a new account][GithubJoin] before you continue.
 2.  In your browser, navigate to [https://github.com/angular/angular][GithubAngular].
 3.  In your browser, fork the `angular/angular` repo into your GitHub account.
@@ -338,9 +338,9 @@ Notice that this form of provider has a third key, `deps`, which specifies depen
 Use this technique to create a dependency object with a factory function whose inputs are a combination of *injected services* and *local state*.

 The dependency object \(returned by the factory function\) is typically a class instance, but can be other things as well.
-In this example, the dependency object is a string of the names of the runners up to the "Hero of the Month" contest.
+In this example, the dependency object is a string of the names of the runners-up to the "Hero of the Month" contest.

-In the example, the local state is the number `2`, the number of runners up that the component should show.
+In the example, the local state is the number `2`, the number of runners-up that the component should show.
 The state value is passed as an argument to `runnersUpFactory()`.
 The `runnersUpFactory()` returns the *provider factory function*, which can use both the passed-in state value and the injected services `Hero` and `HeroService`.

@@ -465,7 +465,7 @@ That's why you call the `HeroService` from within the `ngOnInit` rather than the
 </div>

 Users want to see the heroes in alphabetical order.
-Rather than modify the original component, sub-class it and create a `SortedHeroesComponent` that sorts the heroes before presenting them.
+Rather than modify the original component, subclass it and create a `SortedHeroesComponent` that sorts the heroes before presenting them.
 The `SortedHeroesComponent` lets the base class fetch the heroes.

 Unfortunately, Angular cannot inject the `HeroService` directly into the base class.
@@ -139,7 +139,7 @@ To deploy your Angular application to [GitHub Pages](https://help.github.com/art

    </code-example>

-1.  Build your project using the Github project name, with the Angular CLI command [`ng build`](cli/build) and the following options, where `your_project_name` is the name of the project that you gave the GitHub repository in step 1.
+1.  Build your project using the GitHub project name, with the Angular CLI command [`ng build`](cli/build) and the following options, where `your_project_name` is the name of the project that you gave the GitHub repository in step 1.

    Be sure to include the slashes on either side of your project name as in `/your_project_name/`.

@@ -158,7 +158,7 @@ To deploy your Angular application to [GitHub Pages](https://help.github.com/art

 <div class="alert is-helpful">

-Check out [angular-cli-ghpages](https://github.com/angular-buch/angular-cli-ghpages), a full featured package that does all this for you and has extra functionality.
+Check out [angular-cli-ghpages](https://github.com/angular-buch/angular-cli-ghpages), a full-featured package that does all this for you and has extra functionality.

 </div>

@@ -170,7 +170,7 @@ This section covers changes you may have to make to the server or to files deplo

 <a id="fallback"></a>

-### Routed apps must fallback to `index.html`
+### Routed apps must fall back to `index.html`

 Angular applications are perfect candidates for serving with a simple static HTML server.
 You don't need a server-side engine to dynamically compose application pages because
@@ -384,7 +384,7 @@ These restrictions will be relaxed with the release of Ivy since it'll no longer

 Angular applications, and specifically applications that relied on the JIT compiler, used to require a polyfill for the [reflect-metadata](https://github.com/rbuckton/reflect-metadata) APIs.

-The need for this polyfill was removed in Angular version 8.0 \([see #14473](https://github.com/angular/angular-cli/pull/14473)\), rendering the presence of the poylfill in most Angular applications unnecessary.
+The need for this polyfill was removed in Angular version 8.0 \([see #14473](https://github.com/angular/angular-cli/pull/14473)\), rendering the presence of the polyfill in most Angular applications unnecessary.
 Because the polyfill can be depended on by 3rd-party libraries, instead of removing it from all Angular projects, we are deprecating the requirement for this polyfill as of version 8.0.
 This should give library authors and application developers sufficient time to evaluate if they need the polyfill, and perform any refactoring necessary to remove the dependency on it.

@@ -549,8 +549,8 @@ Projects that currently have `fullTemplateTypeCheck: true` configured can migrat

 ## JIT API changes due to ViewEngine deprecation

-In ViewEngine, [JIT compilation](https://angular.io/guide/glossary#jit) required special providers \(like `Compiler`, `CompilerFactory`, etc.\) to be injected in the app and corresponding methods to be invoked.
-With Ivy, JIT compilation takes place implicitly if the Component, NgModule, etc have not already been [AOT compiled](https://angular.io/guide/glossary#aot).
+In ViewEngine, [JIT compilation](https://angular.io/guide/glossary#jit) required special providers \(such as `Compiler` or `CompilerFactory`\) to be injected in the app and corresponding methods to be invoked.
+With Ivy, JIT compilation takes place implicitly if the Component, NgModule, etc. have not already been [AOT compiled](https://angular.io/guide/glossary#aot).
 Those special providers were made available in Ivy for backwards-compatibility with ViewEngine to make the transition to Ivy smoother.
 Since ViewEngine is deprecated and will soon be removed, those symbols are now deprecated as well.

@@ -132,7 +132,7 @@ Type `$ng0` to get a reference to the instance of the currently selected compone
 ### Select a directive or component

 Similar to browsers' DevTools, you can inspect the page to select a particular component or directive.
-Click the ***Inspect element*** icon at the top left corner within Angular DevTools and hover over a DOM element on the page.
+Click the ***Inspect element*** icon in the top left corner within Angular DevTools and hover over a DOM element on the page.
 The extension recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree.

 <div class="lightbox">
@@ -154,7 +154,7 @@ The **Profiler** tab lets you preview the execution of Angular's change detectio
 </div>

 The Profiler lets you start profiling or import an existing profile.
-To start profiling your application, hover over the circle at the top-left corner within the **Profiler** tab and click **Start recording**.
+To start profiling your application, hover over the circle in the top-left corner within the **Profiler** tab and click **Start recording**.

 During profiling, Angular DevTools captures execution events, such as change detection and lifecycle hook execution.
 To finish recording, click the circle again to **Stop recording**.
@@ -54,7 +54,7 @@ Style guides and the style tests can change.

 Generally, shorter sentences are easier to read than longer ones.
 Long sentences can occur when you try to say too much at once.
-Long sentences, as well as the use of parentheses, semi-colons, or words identified as *too-wordy*, generally require rethinking and rewriting.
+Long sentences, as well as the use of parentheses, semicolons, or words identified as *too-wordy*, generally require rethinking and rewriting.

 Consider restructuring a long sentence to break its individual ideas into distinct sentences or bullet points.

@@ -70,7 +70,7 @@ Shorter, more common words are generally easier to read than longer ones.
 This does not mean you need to write down to the audience. Technical docs should still be precise.
 Angular docs are read by many people around the world and should use language that the most people can understand.

-If you think a specific term is required even though it is been flagged as uncommon, try to include a short explanation of the term.
+If you think a specific term is required even though it has been flagged as uncommon, try to include a short explanation of the term.
 Also, try adding some context around its first mention.

 Linking a term to another section or topic is also an option, but consider the disruption that causes to the reader before you use it.
@@ -175,7 +175,7 @@ Sentences that start with the words identified by this message can usually be ma

 Cliches should be replaced by more literal text.

-Cliches make it difficult for people who don't understand English to understand the documentation. When cliches are translated by online tools such as Google translate, they can produce confusing results.
+Cliches make it difficult for people who don't understand English to understand the documentation. When cliches are translated by online tools such as Google Translate, they can produce confusing results.

 ## If all else fails

@@ -577,7 +577,7 @@ Use `#docregion` in source files to mark code for use in `<code-example>` or `<c
 The `#docregion` comment begins a code snippet region.
 Every line of code after that comment belongs in the region until the code fragment processor encounters the end of the file or a closing `#enddocregion`.

-The following `src/main.ts` is a an example of a file with a single `#docregion` at the top of the file.
+The following `src/main.ts` is an example of a file with a single `#docregion` at the top of the file.

 <code-example header="src/main.ts" path="docs-style-guide/src/main.ts"></code-example>

@@ -71,13 +71,13 @@ Combinations of keys can be separated by a `.` (period). For example, `keydown.e
   <input (keydown.shift.t)="onKeydown($event)" />
   ```

-Depending on the operating system, some key combinations might create special characters instead of the key combination that you expect. MacOS, for example, creates special characters when you use the option and shift keys together. If you bind to `keydown.shift.alt.t`, on MacOS, that combination produces a `ˇ` character instead of a `t`, which doesn't match the binding and won't trigger your event handler. To bind to `keydown.shift.alt.t` on MacOS, use the `code` keyboard event field to get the correct behavior, such as `keydown.code.shiftleft.altleft.keyt` shown in this example.
+Depending on the operating system, some key combinations might create special characters instead of the key combination that you expect. MacOS, for example, creates special characters when you use the option and shift keys together. If you bind to `keydown.shift.alt.t`, on macOS, that combination produces a `ˇ` character instead of a `t`, which doesn't match the binding and won't trigger your event handler. To bind to `keydown.shift.alt.t` on macOS, use the `code` keyboard event field to get the correct behavior, such as `keydown.code.shiftleft.altleft.keyt` shown in this example.
   
   ```typescript
   <input (keydown.code.shiftleft.altleft.keyt)="onKeydown($event)" />
   ```

-The `code` field is more specific than the `key` field. The `key` field always reports `shift`, whereas the `code` field will specify `leftshift` or `rightshift`. When using the `code` field, you might need to add separate bindings to catch all the behaviors you want. Using the `code` field avoids the need to handle OS specific behaviors such as the `shift + option` behavior on MacOS.
+The `code` field is more specific than the `key` field. The `key` field always reports `shift`, whereas the `code` field will specify `leftshift` or `rightshift`. When using the `code` field, you might need to add separate bindings to catch all the behaviors you want. Using the `code` field avoids the need to handle OS specific behaviors such as the `shift + option` behavior on macOS.

 For more information, visit the full reference for [key](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) and [code](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values) to help build out your event strings.

@@ -83,7 +83,7 @@ Subfolders contain the application source and application-specific configuration
 <div class="alert is-helpful">

 New Angular projects use strict mode by default.
-If this is not desired you can opt-out when creating the project.
+If this is not desired you can opt out when creating the project.
 For more information, see [Strict mode](guide/strict-mode).

 </div>
@@ -334,7 +334,7 @@ See also [lazy loading][AioGuideGlossaryLazyLoading].
 The [official JavaScript language specification][WikipediaWikiEcmascript].

 Not all browsers support the latest ECMAScript standard, but you can use a [transpiler][AioGuideGlossaryTranspile] to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers.
-A example of a [transpiler][AioGuideGlossaryTranspile] is [TypeScript][AioGuideGlossaryTypescript].
+An example of a [transpiler][AioGuideGlossaryTranspile] is [TypeScript][AioGuideGlossaryTypescript].
 To learn more, see [Browser Support][AioGuideBrowserSupport].

 ## element
@@ -357,7 +357,7 @@ For example, the `@angular/core` package has two entry-point modules, which can

 ## form control

-A instance of `FormControl`, which is a fundamental building block for Angular forms.
+An instance of `FormControl`, which is a fundamental building block for Angular forms.
 Together with `FormGroup` and `FormArray`, tracks the value, validation, and status of a form input element.

 Read more forms in the [Introduction to forms in Angular][AioGuideFormsOverview].
@@ -589,7 +589,7 @@ See [Browser Support][AioGuideBrowserSupport] for polyfills that support particu

 ## project

-In the Angular CLI, a standalone application or [library][AioGuideGlossaryLibrary] that can be created or modified by a Angular CLI command.
+In the Angular CLI, a standalone application or [library][AioGuideGlossaryLibrary] that can be created or modified by an Angular CLI command.

 A project, as generated by the [`ng new`][AioCliNew], contains the set of source files, resources, and configuration files that you need to develop and test the application using the Angular CLI.
 Projects can also be created with the `ng generate application` and `ng generate library` commands.
@@ -302,7 +302,7 @@ Components are used in your templates, as in the following example:
 Usually, you declare the components and their templates in separate files.
 For the purposes of understanding how the injection system works, it is useful to look at them from the point of view of a combined logical tree.
 The term _logical_ distinguishes it from the render tree, which is your application's DOM tree.
-To mark the locations of where the component templates are located, this guide uses the `<#VIEW>` pseudo element, which doesn't actually exist in the render tree and is present for mental model purposes only.
+To mark the locations of where the component templates are located, this guide uses the `<#VIEW>` pseudo-element, which doesn't actually exist in the render tree and is present for mental model purposes only.

 </div>

@@ -895,7 +895,7 @@ Instead, you can provide the `VillainsService` in the `providers` metadata of th

 <code-example header="src/app/villains-list.component.ts (metadata)" path="hierarchical-dependency-injection/src/app/villains-list.component.ts" region="metadata"></code-example>

-By providing `VillainsService` in the `VillainsListComponent` metadata and nowhere else, the service becomes available only in the `VillainsListComponent` and its sub-component tree.
+By providing `VillainsService` in the `VillainsListComponent` metadata and nowhere else, the service becomes available only in the `VillainsListComponent` and its subcomponent tree.

 `VillainService` is a singleton with respect to `VillainsListComponent` because that is where it is declared.
 As long as `VillainsListComponent` does not get destroyed it will be the same instance of `VillainService` but if there are multiple instances of `VillainsListComponent`, then each instance of `VillainsListComponent` will have its own instance of `VillainService`.
@@ -971,7 +971,7 @@ The root injector, marked as \(A\), uses *generic* providers for details about `

 2. Child component \(B\). Component \(B\) defines its own, *specialized* providers for `CarService` and `EngineService` that have special capabilities suitable for what's going on in component \(B\).

-3. Child component \(C\) as a childe of Component \(B\). Component \(C\) defines its own, even *more specialized* provider for `CarService`.
+3. Child component \(C\) as a child of Component \(B\). Component \(C\) defines its own, even *more specialized* provider for `CarService`.

 <div class="lightbox">

@@ -537,7 +537,7 @@ Like other services, you must provide the interceptor class before the app can u
 Because interceptors are optional dependencies of the `HttpClient` service, you must provide them in the same injector or a parent of the injector that provides `HttpClient`.
 Interceptors provided *after* DI creates the `HttpClient` are ignored.

-This app provides `HttpClient` in the app's root injector, as a side-effect of importing the `HttpClientModule` in `AppModule`.
+This app provides `HttpClient` in the app's root injector, as a side effect of importing the `HttpClientModule` in `AppModule`.
 You should provide interceptors in `AppModule` as well.

 After importing the `HTTP_INTERCEPTORS` injection token from `@angular/common/http`, write the `NoopInterceptor` provider like this:
@@ -14,7 +14,7 @@ For more information about how to serve each distributable copy of the applicati

 </div>

-For a compile time translation of the application, the build process uses [ahead-of-time (AOT) compilation][AioGuideGlossaryAheadOfTimeAotCompilation] to produce a small, fast, ready-to-run application.
+For a compile-time translation of the application, the build process uses [ahead-of-time (AOT) compilation][AioGuideGlossaryAheadOfTimeAotCompilation] to produce a small, fast, ready-to-run application.

 <div class="alert is-helpful">

@@ -1,6 +1,6 @@
 # Setting up `NgOptimizedImage`

-This tutorial explains how to setup the `NgOptimizedImage`. For information on using `NgOptimizedImage`, see [Getting Started with NgOptimizedImage](/guide/image-directive).
+This tutorial explains how to set up the `NgOptimizedImage`. For information on using `NgOptimizedImage`, see [Getting Started with NgOptimizedImage](/guide/image-directive).

 ## Import `NgOptimizedImage`

@@ -29,7 +29,7 @@ Based on the image services commonly used with Angular applications, `NgOptimize

 You must configure an image loader to use `NgOptimizedImage`.

-These instructions explain how to setup an image loader for use with the `NgOptimizedImage`. 
+These instructions explain how to set up an image loader for use with the `NgOptimizedImage`. 

 1. Import the `NgOptimizedImage` directive into the application by adding it to the `imports` section of an NgModule or a standalone Component.

@@ -19,7 +19,7 @@ In addition to optimizing the loading of the LCP image, `NgOptimizedImage` enfor

 ## Prerequisites

-You will need to import the directive into your application. In addition, you will need to setup an image loader. These steps are explained in the [Setting up `NgOptimizedImage`](/guide/image-directive-setup) tutorial.
+You will need to import the directive into your application. In addition, you will need to set up an image loader. These steps are explained in the [Setting up `NgOptimizedImage`](/guide/image-directive-setup) tutorial.

 ## Usage in a template

@@ -148,7 +148,7 @@ When you type into the editor, the editor sends information to the language-serv

 When you trigger a completion list within a template, the editor first parses the template into an HTML [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree).
 The Angular compiler interprets that tree to determine the context: which module the template is part of, the current scope, the component selector, and where your cursor is in the template AST.
-It can then determine the symbols that could potentially be at that position..
+It can then determine the symbols that could potentially be at that position.

 It's a little more involved if you are in an interpolation.
 If you have an interpolation of `{{data.---}}` inside a `div` and need the completion list after `data.---`, the compiler can't use the HTML AST to find the answer.
@@ -27,7 +27,7 @@ It also lists `@angular/localize` as a dependency in your app's `package.json` t

 `@angular/localize` is a new package that supports i18n of messages in Ivy applications.
 This package requires a global `$localize` symbol to exist.
-The symbol is loaded by importing the `@angular/localize/init` module, which has the side-effect of attaching it to the global scope.
+The symbol is loaded by importing the `@angular/localize/init` module, which has the side effect of attaching it to the global scope.

 ## Why is this migration necessary?

@@ -41,7 +41,7 @@ Because the application does not need to be built again for each locale, this ma
 The post-compilation inlining step is optional &mdash;for example during development or if the translations will be inlined at runtime.
 Therefore this global `$localize` must be available on the global scope at runtime.
 To make `$localize` available on the global scope, each application must now import the `@angular/localize/init` module.
-This has the side-effect of attaching a minimal implementation of `&dollar;localize` to the global scope.
+This has the side effect of attaching a minimal implementation of `&dollar;localize` to the global scope.

 If this import is missing, you will see an error message like this:

@@ -9,7 +9,7 @@ This section provides guidance on migrating from this deprecated API to the newe

 The deprecated `Renderer` class has been removed in version 9 of Angular, so it's necessary to migrate to a supported API.
 Using `Renderer2` is the recommended strategy because it supports a similar set of functionality to `Renderer`.
-The API surface is quite large \(with 19 methods\, but the schematic should simplify this process for your applications.
+With 19 methods, the API surface is quite large, but the schematic should simplify this process for your applications.

 ## Is there action required on my end?

@@ -51,7 +51,7 @@ This error often means that you haven't declared the directive "x" or haven't im

 <div class="alert is-helpful">

-Perhaps you declared "x" in an application sub-module but forgot to export it.
+Perhaps you declared "x" in an application submodule but forgot to export it.
 The "x" class isn't visible to other modules until you add it to the `exports` list.

 </div>
@@ -384,7 +384,7 @@ The answer is grounded in a fundamental characteristic of the Angular dependency
 An injector can add providers *until it's first used*.
 Once an injector starts creating and delivering services, its provider list is frozen; no new providers are allowed.

-When an applications starts, Angular first configures the root injector with the providers of all eagerly loaded NgModules *before* creating its first component and injecting any of the provided services.
+When an application starts, Angular first configures the root injector with the providers of all eagerly loaded NgModules *before* creating its first component and injecting any of the provided services.
 Once the application begins, the application root injector is closed to new providers.

 Time passes and application logic triggers lazy loading of an NgModule.
@@ -34,7 +34,7 @@ import { AppComponent } from './app.component';
 Each module has its own top-level scope.
 In other words, top-level variables and functions in a module are not seen in other scripts or modules.
 Each module provides a namespace for identifiers to prevent them from clashing with identifiers in other modules.
-With multiple modules, you can prevent accidental global variables by creating a single global namespace and adding sub-modules to it.
+With multiple modules, you can prevent accidental global variables by creating a single global namespace and adding submodules to it.

 The Angular framework itself is loaded as a set of JavaScript modules.

@@ -318,7 +318,7 @@ Observables can deliver single or multiple values of any type, either synchronou

 <div class="alert is-helpful">

-For details and examples of observables, see the [Observables Overview](guide/observables#using-observables-to-pass-values "Using observables to pass values"").
+For details and examples of observables, see the [Observables Overview](guide/observables#using-observables-to-pass-values "Using observables to pass values").

 </div>

@@ -155,7 +155,7 @@ To help ensure that you have sufficient time and a clear path to update, this is

 ## Public API surface

-Angular is a collection of many packages, sub-projects, and tools.
+Angular is a collection of many packages, subprojects, and tools.
 To prevent accidental use of private APIs and so that you can clearly understand what is covered by the practices described here &mdash; we document what is and is not considered our public API surface.
 For details, see [Supported Public API Surface of Angular](https://github.com/angular/angular/blob/main/docs/PUBLIC_API.md "Supported Public API Surface of Angular").

@@ -29,7 +29,7 @@ We conducted a series of 40 interviews to understand the requirements for micro-
 ### Investigate modern bundles

 To improve development experience by speeding up build times research modern bundles.
-As part of the project experiment with [esbuild](https://esbuild.github.io) and other open source solutions, compare them with the state of the art tooling in Angular CLI, and report the findings. In Angular v14 we're releasing an [experimental support](https://github.com/angular/angular-cli/pull/22995) for esbuild. Next, the team will focus on validating the new prototype and implementing watch and Sass support.
+As part of the project experiment with [esbuild](https://esbuild.github.io) and other open source solutions, compare them with the state-of-the-art tooling in Angular CLI, and report the findings. In Angular v14 we're releasing an [experimental support](https://github.com/angular/angular-cli/pull/22995) for esbuild. Next, the team will focus on validating the new prototype and implementing watch and Sass support.

 ### Modern CSS

@@ -177,7 +177,7 @@ Introduce other correctness and conformance checks to further guarantee correctn
 *Completed Q3 2021*

 To ensure we provide a future-proof e2e testing strategy, we want to evaluate the state of Protractor, community innovations, e2e best practices, and explore novel opportunities.
-As first steps of the effort, we shared an [RFC](https://github.com/angular/protractor/issues/5502) and worked with partners to ensure smooth integration between the Angular CLI and state of the art tooling for e2e testing.
+As first steps of the effort, we shared an [RFC](https://github.com/angular/protractor/issues/5502) and worked with partners to ensure smooth integration between the Angular CLI and state-of-the-art tooling for e2e testing.
 As the next step, we need to finalize the recommendations and compile a list of resources for the transition.

 ### Angular libraries use Ivy
@@ -110,7 +110,7 @@ Click the browser back button or the "Heroes" link to activate a dialog.
 You can say "OK" and lose your changes or click "Cancel" and continue editing.

 Behind this behavior is the router's `CanDeactivate` guard.
-The guard gives you a chance to clean-up or ask the user's permission before navigating away from the current view.
+The guard gives you a chance to clean up or ask the user's permission before navigating away from the current view.

 The `Admin` and `Login` buttons illustrate other router capabilities covered later in the guide.

@@ -1882,7 +1882,7 @@ The admin feature is now protected by the guard, but the guard requires more cus

 Make the `AuthGuard` mimic authentication.

-The `AuthGuard` should call an application service that can login a user and retain information about the current user.
+The `AuthGuard` should call an application service that can log in a user and retain information about the current user.
 Generate a new `AuthService` in the `auth` folder:

 <code-example format="shell" language="shell">
@@ -2430,7 +2430,7 @@ If the route does not preload, it returns an `Observable` of `null`.

 In this sample, the  `preload()` method loads the route if the route's `data.preload` flag is truthy.

-As a side-effect, `SelectivePreloadingStrategyService` logs the `path` of a selected route in its public `preloadedModules` array.
+As a side effect, `SelectivePreloadingStrategyService` logs the `path` of a selected route in its public `preloadedModules` array.

 Shortly, you'll extend the `AdminDashboardComponent` to inject this service and display its `preloadedModules` array.

@@ -2457,7 +2457,7 @@ It also logs to the browser's console.

 ### Migrating URLs with redirects

-You've setup the routes for navigating around your application and used navigation imperatively and declaratively.
+You've set up the routes for navigating around your application and used navigation imperatively and declaratively.
 But like any application, requirements change over time.
 You've setup links and navigation to `/heroes` and `/hero/:id` from the `HeroListComponent` and `HeroDetailComponent` components.
 If there were a requirement that links to `heroes` become `superheroes`, you would still want the previous URLs to navigate correctly.
@@ -134,7 +134,7 @@ These examples use a shorthand form of the prompt syntax, supplying only the tex
 In most cases, this is all that is required.
 Notice however, that the two prompts expect different types of input.
 When using the shorthand form, the most appropriate type is automatically selected based on the property's schema.
-In the example, the `name` prompt uses the `input` type because it it is a string property.
+In the example, the `name` prompt uses the `input` type because it is a string property.
 The `useColor` prompt uses a `confirmation` type because it is a Boolean property.
 In this case, "yes" corresponds to `true` and "no" corresponds to `false`.

@@ -6,7 +6,7 @@ Schematics are packaged into [collections](guide/glossary#collection) and instal

 The schematic collection can be a powerful tool for creating, modifying, and maintaining any software project, but is particularly useful for customizing Angular projects to suit the particular needs of your own organization.
 You might use schematics, for example, to generate commonly-used UI patterns or specific components, using predefined templates or layouts.
-Use schematics to enforce architectural rules and conventions, making your projects consistent and inter-operative.
+Use schematics to enforce architectural rules and conventions, making your projects consistent and interoperative.

 ## Schematics for the Angular CLI

@@ -162,7 +162,7 @@ Content Security Policy \(CSP\) is a defense-in-depth technique to prevent XSS.
 To enable CSP, configure your web server to return an appropriate `Content-Security-Policy` HTTP header.
 Read more about content security policy at the [Web Fundamentals guide](https://developers.google.com/web/fundamentals/security/csp) on the Google Developers website.

-The minimal policy required for brand new Angular is:
+The minimal policy required for brand-new Angular is:

 <code-example format="none" language="none">

@@ -290,7 +290,7 @@ Such tools can be powerful when used properly, but there are a few things to kee
    This can cause behavior with Dev Tools open to differ from behavior a user might experience.

 *   If you look in the Cache Storage viewer, the cache is frequently out of date.
-    Right click the Cache Storage title and refresh the caches.
+    Right-click the Cache Storage title and refresh the caches.

 *   Stopping and starting the service worker in the Service Worker pane checks for updates

@@ -336,7 +336,7 @@ You might have already encountered the error `The script resource is behind a re
 </div>

 This can be a problem if you have to change your application's location.
-If you setup a redirect from the old location, such as `example.com`, to the new location, `www.example.com` in this example, the worker stops working.
+If you set up a redirect from the old location, such as `example.com`, to the new location, `www.example.com` in this example, the worker stops working.
 Also, the redirect won't even trigger for users who are loading the site entirely from Service Worker.
 The old worker, which was registered at `example.com`, tries to update and sends a request to the old location `example.com`. This request is redirected to the new location `www.example.com` and creates the error: `The script resource is behind a redirect, which is disallowed`.

@@ -85,7 +85,7 @@ To simulate a network issue, disable network interaction for your application.

 In Chrome:

-1.  Select **Tools** &gt; **Developer Tools** \(from the Chrome menu located at the top right corner\).
+1.  Select **Tools** &gt; **Developer Tools** \(from the Chrome menu located in the top right corner\).
 1.  Go to the **Network tab**.
 1.  Select **Offline** in the **Throttling** dropdown menu.

@@ -249,7 +249,7 @@ The new bootstrap API gives us back the means of configuring “module injectors
 Environment injectors can be configured using one of the following:

 *   `@NgModule.providers` (in applications bootstrapping through an `NgModule`);
-*   `@Injectable({provideIn: "..."})`(in both the NgModule-based as well as “standalone” applications);
+*   `@Injectable({provideIn: "..."})`(in both the NgModule-based and the “standalone” applications);
 *   `providers` option in the `bootstrapApplication` call (in fully “standalone” applications);
 *   `providers` field in a `Route` configuration.

@@ -201,7 +201,7 @@ Angular version 7 apps will continue to work with libraries that have this flag.
 However, if you update your library to Angular version 8 and want to take advantage of the new version 8 APIs, or you want more recent dependencies \(such as Typescript or RxJS\) your library will become incompatible with Angular version 7 apps.
 If your goal is to make your library compatible with Angular versions 7 and 8, you should not update your lib at all &mdash;except for `peerDependencies` in `package.json`.

-In general, the most efficient plan is for libraries to adopt a 6 month major version schedule and bump the major version after each Angular update.
+In general, the most efficient plan is for libraries to adopt a 6-month major version schedule and bump the major version after each Angular update.
 That way, libraries stay in the same release cadence as Angular.

 <!-- links -->
@@ -97,7 +97,7 @@ A single component can be the default export for its file which facilitates lazy

 </div>

-The key is to make the code more reusable, easier to read, and less mistake prone.
+The key is to make the code more reusable, easier to read, and less mistake-prone.

 The following *negative* example defines the `AppComponent`, bootstraps the app,
 defines the `Hero` model object, and loads heroes from the server all in the same file.
@@ -550,7 +550,7 @@ Keeps the names of the properties defined in the directives that are bound to th
 <div class="s-why-last">

 **Why**? <br />
-The Angular HTML parser is case sensitive and recognizes lower camel case.
+The Angular HTML parser is case-sensitive and recognizes lower camel case.

 </div>

@@ -264,7 +264,7 @@ Some noteworthy observations:

 When you're filtering by CSS selector and only testing properties of a browser's *native element*, the `By.css` approach might be overkill.

-It's often straightforward and more clear to filter with a standard `HTMLElement` method such as `querySelector()` or `querySelectorAll()`.
+It's often more straightforward and clear to filter with a standard `HTMLElement` method such as `querySelector()` or `querySelectorAll()`.

 <!-- links -->

@@ -150,7 +150,7 @@ To correct the problem, call `compileComponents()` as explained in the following

 Components often have service dependencies.

-The `WelcomeComponent` displays a welcome message to the logged in user.
+The `WelcomeComponent` displays a welcome message to the logged-in user.
 It knows who the user is based on a property of the injected `UserService`:

 <code-example header="app/welcome/welcome.component.ts" path="testing/src/app/welcome/welcome.component.ts"></code-example>
@@ -618,7 +618,7 @@ Learn about it on the web, starting with the [official documentation](https://rx
 ## Component with inputs and outputs

 A component with inputs and outputs typically appears inside the view template of a host component.
-The host uses a property binding to set the input property and an event binding tolisten to events raised by the output property.
+The host uses a property binding to set the input property and an event binding to listen to events raised by the output property.

 The testing goal is to verify that such bindings work as expected.
 The tests should set input values and listen for output events.
@@ -790,7 +790,7 @@ This testing module configuration shows three important differences:

 The `createComponent` returns a `fixture` that holds an instance of `TestHostComponent` instead of an instance of `DashboardHeroComponent`.

-Creating the `TestHostComponent` has the side-effect of creating a `DashboardHeroComponent` because the latter appears within the template of the former.
+Creating the `TestHostComponent` has the side effect of creating a `DashboardHeroComponent` because the latter appears within the template of the former.
 The query for the hero element \(`heroEl`\) still finds it in the test DOM, albeit at greater depth in the element tree than before.

 The tests themselves are almost identical to the stand-alone version:
@@ -1070,7 +1070,7 @@ This is a skill you might need to test a more sophisticated component, one that

 #### What good are these tests?

-Stubbed `RouterLink` tests can confirm that a component with links and an outlet is setup properly, that the component has the links it should have, and that they are all pointing in the expected direction.
+Stubbed `RouterLink` tests can confirm that a component with links and an outlet is set up properly, that the component has the links it should have, and that they are all pointing in the expected direction.
 These tests do not concern whether the application will succeed in navigating to the target component when the user clicks a link.

 Stubbing the RouterLink and RouterOutlet is the best option for such limited testing goals.
@@ -1167,7 +1167,7 @@ So when you call `createComponent()`, the `TestBed` compiles implicitly.
 That's not a problem when the source code is in memory.
 But the `BannerComponent` requires external files that the compiler must read from the file system, an inherently *asynchronous* operation.

-If the `TestBed` were allowed to continue, the tests would run and fail mysteriously before the compiler could finished.
+If the `TestBed` were allowed to continue, the tests would run and fail mysteriously before the compiler could finish.

 The preemptive error message tells you to compile explicitly with `compileComponents()`.

@@ -278,7 +278,7 @@ This article explains how to configure your project to run Circle CI and Travis

    <code-example format="yaml" language="yaml">

-    name: CI Angular app through Github Actions
+    name: CI Angular app through GitHub Actions
    on: push
    jobs:
      build:
@@ -281,7 +281,7 @@ Use keyframes to create a pulse effect in your animations by defining styles at
 Here's an example of using keyframes to create a pulse effect:

 *   The original `open` and `closed` states, with the original changes in height, color, and opacity, occurring over a timeframe of 1 second
-*   A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1 second timeframe
+*   A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1-second timeframe

 <div class="lightbox">

@@ -169,7 +169,7 @@ addresses.addControl('Andrew', new FormControl('2340 Folsom St'));

 Any control of type `string|null` can be added to this `FormRecord`.

-If you need a `FormGroup` that is both dynamic (open-ended) and heterogenous (the controls are different types), no improved type safety is possible, and you should use `UntypedFormGroup`.
+If you need a `FormGroup` that is both dynamic (open-ended) and heterogeneous (the controls are different types), no improved type safety is possible, and you should use `UntypedFormGroup`.

 A `FormRecord` can also be built with the `FormBuilder`:

@@ -1,6 +1,6 @@
 # Updating search keywords

-In documentation, being able to find the content you need is equally as important as the content itself.
+In documentation, being able to find the content you need is as important as the content itself.
 In [angular.io](https://angular.io), users can discover content in several ways, including:

 *   Organic search results, such as through [google.com](https://google.com)
@@ -128,7 +128,7 @@ You define that recipe by providing a factory function that can create an instan
 *   `NgModuleFactory`
 *   `(extraProviders: StaticProvider[]) => Promise<NgModuleRef>`

-When you pass an `NgModuleFactory`, `downgradeModule()` uses it to instantiate the module using [platformBrowser](api/platform-browser/platformBrowser]'s [bootstrapModuleFactory()](api/core/PlatformRef#bootstrapModuleFactory), which is compatible with ahead-of-time \(AOT\) compilation.
+When you pass an `NgModuleFactory`, `downgradeModule()` uses it to instantiate the module using [platformBrowser](api/platform-browser/platformBrowser)'s [bootstrapModuleFactory()](api/core/PlatformRef#bootstrapModuleFactory), which is compatible with ahead-of-time \(AOT\) compilation.
 AOT compilation helps make your applications load faster
 For more about AOT and how to create an `NgModuleFactory`, see the [Ahead-of-Time Compilation](guide/aot-compiler) guide.

@@ -177,7 +177,7 @@ As you might have guessed, you don't need to change anything in the way you boot
 Unlike `UpgradeModule`&mdash;which requires some extra steps&mdash; `downgradeModule()` is able to take care of bootstrapping the Angular module, as long as you provide the recipe.

 In order to start using any `upgrade/static` APIs, you still need to load the Angular framework as you would in a normal Angular application.
-You can see how this can be done with SystemJS by following the instructions in the [Upgrade Setup](guide/upgrade-setup "Setup for Upgrading from AngularJS") guide, selectively copying code from the [QuickStart github repository](https://github.com/angular/quickstart).
+You can see how this can be done with SystemJS by following the instructions in the [Upgrade Setup](guide/upgrade-setup "Setup for Upgrading from AngularJS") guide, selectively copying code from the [QuickStart GitHub repository](https://github.com/angular/quickstart).

 You also need to install the `@angular/upgrade` package using `npm install @angular/upgrade --save` and add a mapping for the `@angular/upgrade/static` package:

@@ -19,7 +19,7 @@ In particular, the QuickStart live-coding example shows just the AppComponent fi
 -->

 This guide describes how to develop locally on your own machine.
-Setting up a new project on your machine is quick and easy with the [QuickStart seed on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
+Setting up a new project on your machine is quick and easy with the [QuickStart seed on GitHub](https://github.com/angular/quickstart "Install the github QuickStart repo").

 ## Prerequisites

@@ -21,8 +21,8 @@ The `upgrade` module in Angular has been designed to make incremental upgrading
 ## Preparation

 There are many ways to structure AngularJS applications.
-When you begin to upgrade these applications to Angular, some will turn out to be much more easy to work with than others.
-There are a few key techniques and patterns that you can apply to future proof applications even before you begin the migration.
+When you begin to upgrade these applications to Angular, some will turn out to be much easier to work with than others.
+There are a few key techniques and patterns that you can apply to future-proof applications even before you begin the migration.

 ### Follow the AngularJS Style Guide

@@ -309,7 +309,7 @@ You can remove the `ng-app` and `ng-strict-di` directives from the HTML and inst
 <code-example header="app.module.ts" path="upgrade-module/src/app/ajs-bootstrap/app.module.ts" region="bootstrap"></code-example>

 To begin converting your AngularJS application to a hybrid, you need to load the Angular framework.
-You can see how this can be done with SystemJS by following the instructions in [Setup for Upgrading to AngularJS][AioGuideUpgradeSetup] for selectively copying code from the [QuickStart github repository][GithubAngularQuickstart].
+You can see how this can be done with SystemJS by following the instructions in [Setup for Upgrading to AngularJS][AioGuideUpgradeSetup] for selectively copying code from the [QuickStart GitHub repository][GithubAngularQuickstart].

 You also need to install the `@angular/upgrade` package using `npm install @angular/upgrade --save` and add a mapping for the `@angular/upgrade/static` package:

@@ -556,7 +556,7 @@ For example, you might have a service called `HeroesService` in AngularJS:

 <code-example header="heroes.service.ts" path="upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts"></code-example>

-You can upgrade the service using a Angular [factory provider][AioGuideDependencyInjectionProvidersFactoryProviders] that requests the service from the AngularJS `$injector`.
+You can upgrade the service using an Angular [factory provider][AioGuideDependencyInjectionProvidersFactoryProviders] that requests the service from the AngularJS `$injector`.

 Many developers prefer to declare the factory provider in a separate `ajs-upgraded-providers.ts` file so that they are all together, making it easier to reference them, create new ones and delete them once the upgrade is over.

@@ -634,7 +634,7 @@ This strategy reduces your initial bundle size, defers any potential impact from

 The steps below show you how to do the following:

-*   Setup a callback function for your AngularJS bundle.
+*   Set up a callback function for your AngularJS bundle.
 *   Create a service that lazy loads and bootstraps your AngularJS app.
 *   Create a routable component for AngularJS content
 *   Create a custom `matcher` function for AngularJS-specific URLs and configure the Angular `Router` with the custom matcher for AngularJS routes.
@@ -131,7 +131,7 @@ The following example uses a template reference variable to implement a keystrok
 The template reference variable named `box`, declared on the `<input>` element, refers to the `<input>` element itself.
 The code uses the `box` variable to get the input element's `value` and display it with interpolation between `<p>` tags.

-The template is completely self contained.
+The template is completely self-contained.
 It doesn't bind to the component, and the component does nothing.

 Type something in the input box, and watch the display update with each keystroke.
@@ -275,7 +275,7 @@ By default, the `src/assets/` folder and `src/favicon.ico` are copied over.
 To exclude an asset, you can remove it from the assets configuration.

 You can further configure assets to be copied by specifying assets as objects, rather than as simple paths relative to the workspace root.
-A asset specification object can have the following fields.
+An asset specification object can have the following fields.

 | Fields           | Details |
 |:---              |:---     |
@@ -344,7 +344,7 @@ An array entry for the `styles` and `scripts` options can be a simple path strin
 The associated builder will load that file and its dependencies as a separate bundle during the build.
 With a configuration object, you have the option of naming the bundle for the entry point, using a `bundleName` field.

-The bundle is injected by default, but you can set `inject` to false to exclude the bundle from injection.
+The bundle is injected by default, but you can set `inject` to `false` to exclude the bundle from injection.
 For example, the following object values create and name a bundle that contains styles and scripts, and excludes it from injection:

 <code-example language="json">
@@ -341,7 +341,7 @@ Therefore in those asynchronous APIs, you don't need to trigger change detection

 There are still some third party APIs that Zone does not handle.
 In those cases, the `NgZone` service provides a [`run()`](api/core/NgZone#run) method that allows you to execute a function inside the Angular zone.
-This function, and all asynchronous operations in that function, trigger change detection automatically at the correct time.
+This function, and all asynchronous operations in that function, triggers change detection automatically at the correct time.

 <code-example format="typescript" language="typescript">

@@ -10,7 +10,7 @@ There are two pages:

 *   https://developers.google.com/experts/all/technology/angular
 (Googlers: source at http://google3/googledata/devsite/content/en/experts/all/technology/angular.html) which is maintained by Dawid Ostrowski based on a spreadsheet https://docs.google.com/spreadsheets/d/1_Ls2Kle7NxPBIG8f3OEVZ4gJZ8OCTtBxGYwMPb1TUVE/edit#gid=0.
-    <!-- gkalpak: That URL doesn't seem to work any more. New URL: https://developers.google.com/programs/experts/directory/ (?) -->
+    <!-- gkalpak: That URL doesn't seem to work anymore. New URL: https://developers.google.com/programs/experts/directory/ (?) -->

 *   Ours: https://angular.io/about?group=GDE which is derived from `contributors.json`.

@@ -48,7 +48,7 @@ We want to hear from you. [Report problems or submit suggestions for future docs

 Contribute to Angular docs by creating
 [pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests")
-on the Angular Github repository.
+on the Angular GitHub repository.
 See [Contributing to Angular](https://github.com/angular/angular/blob/main/CONTRIBUTING.md "Contributing guide")
 for information about submission guidelines.

@@ -38,7 +38,7 @@

      <div class="feature">
        <div class="feature-title">Code Generation</div>
-        <p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.</p>
+        <p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of handwritten code with the productivity of a framework.</p>
      </div>

      <div class="feature">
@@ -517,7 +517,7 @@
      projects by tying them to a point in time of Angular, or will require renaming over time.
    </p>
    <p>
-      Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.
+      Where a codename or shortname is used, such as on npm or GitHub, some are acceptable, some are not acceptable.
    </p>

    <b>Do not use</b>
@@ -1,6 +1,6 @@
 # Special Elements

-Each sub-directory below this contains documentation that describes "special elements".
+Each subdirectory below this contains documentation that describes "special elements".
 These are elements that can appear in templates that have special meaning and behaviour in the Angular framework.

 Each element should have a markdown file with the same file name as the element's tag name \(for example, `ng-container.md`\).
@@ -22,7 +22,7 @@ For example, we may want to have a number of elements shown conditionally but th

 </code-example>

-This can also be augmented with the an else statement alongside an `<ng-template>` as:
+This can also be augmented with an `else` statement alongside an `<ng-template>` as:

 <code-example format="html" language="html">

@@ -120,7 +120,7 @@ Users should be able to edit the hero's name in an `<input>` text box.
 The text box should both *display* the hero's `name` property and *update* that property as the user types.
 That means data flows from the component class *out to the screen* and from the screen *back to the class*.

-To automate that data flow, setup a two-way data binding between the `<input>` form element and the `hero.name` property.
+To automate that data flow, set up a two-way data binding between the `<input>` form element and the `hero.name` property.

 ### Two-way binding

@@ -149,7 +149,7 @@ Can't bind to 'ngModel' since it isn't a known property of 'input'.

 Although `ngModel` is a valid Angular directive, it isn't available by default.

-It belongs to the optional `FormsModule` and you must *opt-in* to using it.
+It belongs to the optional `FormsModule` and you must *opt in* to using it.

 ## `AppModule`

@@ -162,7 +162,7 @@ Other critical metadata is in [`@NgModule`](guide/ngmodules) decorators.
 The most important `@NgModule` decorator annotates the top-level **AppModule** class.

 `ng new` created an `AppModule` class in `src/app/app.module.ts` when it created the project.
-This is where you _opt-in_ to the `FormsModule`.
+This is where you _opt in_ to the `FormsModule`.

 ### Import `FormsModule`

@@ -3,7 +3,7 @@
 At the moment, the `HeroesComponent` displays both the list of heroes and the selected hero's details.

 Keeping all features in one component as the application grows won't be maintainable.
-This tutorial splits up large components into smaller sub-components, each focused on a specific task or workflow.
+This tutorial splits up large components into smaller subcomponents, each focused on a specific task or workflow.

 The first step is to move the hero details into a separate, reusable `HeroDetailComponent` and end up with:

@@ -33,7 +33,7 @@ describe('ApiListComponent', () => {
   *
   * @param itemTest - return true if the item passes the match test
   *
-   * Subscibes to `filteredSections` and performs expectation within subscription callback.
+   * Subscribes to `filteredSections` and performs expectation within subscription callback.
   */
  function expectFilteredResult(label: string, itemTest: (item: ApiItem) => boolean) {
    component.filteredSections.subscribe(filtered => {
@@ -14,7 +14,7 @@ Styles are implemented using [Sass](https://sass-lang.com/) and stored in `.scss

 ## File organization

-The `.scss` files are organized in the following sub-directories:
+The `.scss` files are organized in the following subdirectories:
 - [0-base/](./0-base): General styles affecting the whole application.
 - [1-layouts/](./1-layouts): Styles for areas/components related to the layout of the application, such as `top-menu`, `footer`, marketing pages, etc.
 - [2-modules/](./2-modules): Styles for specialized components (such as buttons, code, labels, etc.) and specific pages (such as API list page, "Features" page, etc.).
@@ -30,9 +30,9 @@ There are also some top-level files in `[src/styles/](.):

 ### Styles for a specific area/component

-For each area/component, there is a sub-directory in either `1-layouts/` or `2-modules/`.
+For each area/component, there is a subdirectory in either `1-layouts/` or `2-modules/`.

-Each such sub-directory contains a `<name>.scss` file with styles for the corresponding area/component and may also contain a `<name>-theme.scss` file with styles related to theming.
+Each such subdirectory contains a `<name>.scss` file with styles for the corresponding area/component and may also contain a `<name>-theme.scss` file with styles related to theming.
 See the next section for more details.

 When appropriate, the styles in these files should be scoped to the targeted component (for example, by using the component's selector).
@@ -57,7 +57,7 @@ Most style tests include links to relevant sections in these documents for more

 Generally, shorter sentences are easier to read than longer ones.
 Long sentences can occur when you try to say too much at once.
-Long sentences, as well as the use of parentheses, semi-colons, or words identified as *too-wordy*, generally require rethinking and rewriting.
+Long sentences, as well as the use of parentheses, semicolons, or words identified as *too-wordy*, generally require rethinking and rewriting.
 Consider restructuring a long sentence to break its individual ideas into distinct sentences or bullet points.

 ### Use lists and tables
@@ -71,7 +71,7 @@ Shorter, more common words are generally easier to read than longer ones.
 This does not mean you need to write down to the audience. Technical docs should still be precise.
 Angular docs are read by many people around the world and should use language that the most people can understand.

-If you think a specific term is required even though it is been flagged as uncommon, try to include a short explanation of the term.
+If you think a specific term is required even though it has been flagged as uncommon, try to include a short explanation of the term.
 Also, try adding some context around its first mention.
 Linking a term to another section or definition is also an option, but consider the disruption that causes to the reader before you use it.
 If you force a reader to go to another page for a definition, they might lose their concentration on the current topic and their primary goal.
@@ -1,4 +1,4 @@
-# Inclusuve language tested by Angular CI/CD
+# Inclusive language tested by Angular CI/CD
 # tests for strings that must be replaced before the content is published
 extends: substitution
 message: "Use '%s' instead of '%s'."
@@ -137,7 +137,7 @@ class NgPackagesInstaller {
  }

  /**
-   * Reinstall the original package.json depdendencies
+   * Reinstall the original package.json dependencies
   * Yarn will also delete the local marker file for us.
   */
  restoreNpmDependencies() {
@@ -15,7 +15,7 @@ What is the process from a directory with files to a link with a stackblitz.
 An "executable" stackblitz is an HTML file with a `<form>` that makes a post to stackblitz on submit.
 It contains an `<input>` element for each file we need in the stackblitz.

-The form will be submitted on load, so you can either double click the HTML file or open it with an anchor tag to open the stackblitz.
+The form will be submitted on load, so you can either double-click the HTML file or open it with an anchor tag to open the stackblitz.

 So the `builder.mjs` job is to get all the needed files from an example and build this HTML file for you.

@@ -37,5 +37,5 @@ And some are brought in from the `dgeni-packages` node modules, such as `jsdoc`

 ## Templates

-All the templates for the angular.io dgeni transformations are stoted in the `tools/transforms/templates` folder.
+All the templates for the angular.io dgeni transformations are stored in the `tools/transforms/templates` folder.
 See the [README](./templates/README.md).