docs: Fix several typos in the angular documentation (#45573)

PR Close #45573

aio/content/guide/animations.md

@@ -86,7 +86,7 @@ Let's create a new `open-close` component to animate with simple transitions.
 
 Run the following command in terminal to generate the component:
 
-<code-example format="shell" langauage="shell">
+<code-example format="shell" language="shell">
 
 ng g component open-close
 

aio/content/guide/glossary.md

@@ -218,7 +218,7 @@ See [Browser support][AioGuideBrowserSupport].
 
 The custom element feature extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code.
 A custom element is recognized by a browser when it is added to the [CustomElementRegistry][MdnDocsWebApiCustomelementregistry].
-A custom element is also refernced as a *web component*.
+A custom element is also referenced as a *web component*.
 
 You can use the API to transform an Angular component so that it can be registered with the browser and used in any HTML that you add directly to the DOM within an Angular application.
 The custom element tag inserts the view of the component, with change-detection and data-binding functionality, into content that would otherwise be displayed without Angular processing.
@@ -324,7 +324,7 @@ See also [custom element][AioGuideGlossaryCustomElement], which provides an easi
 
 ## eager loading
 
-NgModules or components that are loaded on launch are referenced as eager-loaded, to distinguish them from those that are loaded at run time that are refernced as lazy-loaded.
+NgModules or components that are loaded on launch are referenced as eager-loaded, to distinguish them from those that are loaded at run time that are referenced as lazy-loaded.
 See also [lazy loading][AioGuideGlossaryLazyLoading].
 
 ## ECMAScript
@@ -857,7 +857,7 @@ Schematic [rules][AioGuideGlossaryRule] take a tree object as input, operate on
 
 A programming language based on JavaScript that is notable for its optional typing system.
 TypeScript provides compile-time type checking and strong tooling support
-The type checking and toooling support include code completion, refactoring, inline documentation, and intelligent search.
+The type checking and tooling support include code completion, refactoring, inline documentation, and intelligent search.
 Many code editors and IDEs support TypeScript either natively or with plug-ins.
 
 TypeScript is the preferred language for Angular development.

aio/content/guide/hierarchical-dependency-injection.md

@@ -334,9 +334,9 @@ In the logical tree, you'll see `@Provide`, `@Inject`, and `@NgModule`, which ar
 
 | Angular service attribute                                                                                          | Details |
 |:---                                                                                                                |:---     |
-| <code-example format="typescript" hideCopy langauage="typescript"> &commat;Inject(Token)=&gt;Value </code-example> | Demonstrates that if `Token` is injected at this location in the logical tree its value would be `Value`.             |
-| <code-example format="typescript" hideCopy langauage="typescript"> &commat;Provide(Token=Value) </code-example>    | Demonstrates that there is a declaration of `Token` provider with value `Value` at this location in the logical tree. |
-| <code-example format="typescript" hideCopy langauage="typescript"> &commat;NgModule(Token) </code-example>         | Demonstrates that a fallback `NgModule` injector should be used at this location.                                     |
+| <code-example format="typescript" hideCopy language="typescript"> &commat;Inject(Token)=&gt;Value </code-example> | Demonstrates that if `Token` is injected at this location in the logical tree its value would be `Value`.             |
+| <code-example format="typescript" hideCopy language="typescript"> &commat;Provide(Token=Value) </code-example>    | Demonstrates that there is a declaration of `Token` provider with value `Value` at this location in the logical tree. |
+| <code-example format="typescript" hideCopy language="typescript"> &commat;NgModule(Token) </code-example>         | Demonstrates that a fallback `NgModule` injector should be used at this location.                                     |
 
 </div>
 

aio/content/guide/http.md

@@ -148,7 +148,7 @@ The callback in the updated component method receives a typed data object, which
 To access properties that are defined in an interface, you must explicitly convert the plain object you get from the JSON to the required response type.
 For example, the following `subscribe` callback receives `data` as an Object, and then type-casts it in order to access the properties.
 
-<code-example format="typescript" langauge="typescript">
+<code-example format="typescript" language="typescript">
 
 .subscribe(data =&gt; this.config = {
   heroesUrl: (data as any).heroesUrl,

aio/content/guide/i18n-optional-manual-runtime-locale.md

@@ -4,7 +4,7 @@
 
 <!--todo: To override the provider for the locale ID token. -->
 
-The inital installation of Angular already contains locale data for English in the United States \(`en-US`\).
+The initial installation of Angular already contains locale data for English in the United States \(`en-US`\).
 The [Angular CLI][AioCliMain] automatically includes the locale data and sets the `LOCALE_ID` value when you use the `--localize` option with [`ng build`][AioCliBuild] command.
 
 To manually set the runtime locale of an application to one other than the automatic value, complete the following actions.

aio/content/guide/prerendering.md

@@ -50,7 +50,7 @@ ng run <app-name>:prerender --routes /product/1 /product/2
 
 </code-example>
 
-#### Providing additonal routes using a file
+#### Providing additional routes using a file
 
 You can provide routes using a file to generate static pages.
 This method is useful if you have a large number of routes to generate, such as product details for an e-commerce application, which might come from an external source \(Database or CMS\).

aio/content/guide/router-reference.md

@@ -165,7 +165,7 @@ These events range from when the navigation starts and ends to many points in be
 | [`ActivationStart`](api/router/ActivationStart)           | Triggered when the Router begins activating a route.                                                                                                                                  |
 | [`GuardsCheckEnd`](api/router/GuardsCheckEnd)             | Triggered when the Router finishes the Guards phase of routing successfully.                                                                                                          |
 | [`ResolveStart`](api/router/ResolveStart)                 | Triggered when the Router begins the Resolve phase of routing.                                                                                                                        |
-| [`ResolveEnd`](api/router/ResolveEnd)                     | Triggered when the Router finishes the Resolve phase of routing successfuly.                                                                                                          |
+| [`ResolveEnd`](api/router/ResolveEnd)                     | Triggered when the Router finishes the Resolve phase of routing successfully.                                                                                                          |
 | [`ChildActivationEnd`](api/router/ChildActivationEnd)     | Triggered when the Router finishes activating a route's children.                                                                                                                     |
 | [`ActivationEnd`](api/router/ActivationEnd)               | Triggered when the Router finishes activating a route.                                                                                                                                |
 | [`NavigationEnd`](api/router/NavigationEnd)               | Triggered when navigation ends successfully.                                                                                                                                          |

aio/content/guide/schematics-for-libraries.md

@@ -52,7 +52,7 @@ If you need to, do additional setup when your package is installed, such as gene
 
 ### Define dependency type
 
-Use the `save` option of `ng-add` to configure if the library should be added to the `dependencies`, the `devDepedencies`, or not saved at all in the project's `package.json` configuration file.
+Use the `save` option of `ng-add` to configure if the library should be added to the `dependencies`, the `devDependencies`, or not saved at all in the project's `package.json` configuration file.
 
 <code-example header="projects/my-lib/package.json (ng-add Reference)" path="schematics-for-libraries/projects/my-lib/package.json" region="ng-add"></code-example>
 

aio/content/guide/set-document-title.md

@@ -12,7 +12,7 @@ See the <live-example name="set-document-title"></live-example>.
 
 The obvious approach is to bind a property of the component to the HTML `<title>` like this:
 
-<code-example format="html" langauage="html">
+<code-example format="html" language="html">
 
 &lt;title&gt;{{This_Does_Not_Work}}&lt;/title&gt;
 

aio/content/guide/template-typecheck.md

@@ -348,7 +348,7 @@ Care should be taken that if an `ngAcceptInputType_` override is present for a g
 Disable checking of a binding expression by surrounding the expression in a call to the [`$any()` cast pseudo-function](guide/template-expression-operators).
 The compiler treats it as a cast to the `any` type just like in TypeScript when a `<any>` or `as any` cast is used.
 
-In the following example, casting `person` to the `any` type suppresses the error `Property address does not exist`.
+In the following example, casting `person` to the `any` type suppresses the error `Property addresss does not exist`.
 
 <code-example format="typescript" language="typescript">
 

aio/content/guide/universal.md

@@ -228,7 +228,7 @@ It accepts an object with the following properties:
 
 | Properties       | Details |
 |:---              |:---     |
-| `bootstrap`      | The root `NgModule` or `NgModule` factory to use for bootstraping the application when rendering on the server. For the example application, it is `AppServerModule`. It's the bridge between the Universal server-side renderer and the Angular application. |
+| `bootstrap`      | The root `NgModule` or `NgModule` factory to use for bootstrapping the application when rendering on the server. For the example application, it is `AppServerModule`. It's the bridge between the Universal server-side renderer and the Angular application. |
 | `extraProviders` | This property is optional and lets you specify dependency providers that apply only when rendering the application on the server. Do this when your application needs information that can only be determined by the currently running server instance.       |
 
 The `ngExpressEngine()` function returns a `Promise` callback that resolves to the rendered page.
@@ -324,10 +324,10 @@ Now, on every HTTP request made as part of rendering the application on the serv
 
 | Scripts                                                                                                    | Details |
 |:---                                                                                                        |:---     |
-| <code-example format="shell" langauage="shell"> npm run dev:ssr </code-example>                            | Similar to [`ng serve`](cli/serve), which offers live reload during development, but uses server-side rendering. The application runs in watch mode and refreshes the browser after every change. This command is slower than the actual `ng serve` command.                                                                                                                                                  |
-| <code-example format="shell" langauage="shell"> ng build &amp;&amp; ng run app-name:server </code-example> | Builds both the server script and the application in production mode. Use this command when you want to build the project for deployment.                                                                                                                                                                                                                                                                     |
-| <code-example format="shell" langauage="shell"> npm run serve:ssr </code-example>                          | Starts the server script for serving the application locally with server-side rendering. It uses the build artifacts created by `ng run build:ssr`, so make sure you have run that command as well. <div class="alert is-helpful"> **NOTE**: <br /> `serve:ssr` is not intended to be used to serve your application in production, but only for testing the server-side rendered application locally. </div> |
-| <code-example format="shell" langauage="shell"> npm run prerender </code-example>                          | Used to prerender an application's pages. Read more about prerendering [here](guide/prerendering).                                                                                                                                                                                                                                                                                                            |
+| <code-example format="shell" language="shell"> npm run dev:ssr </code-example>                            | Similar to [`ng serve`](cli/serve), which offers live reload during development, but uses server-side rendering. The application runs in watch mode and refreshes the browser after every change. This command is slower than the actual `ng serve` command.                                                                                                                                                  |
+| <code-example format="shell" language="shell"> ng build &amp;&amp; ng run app-name:server </code-example> | Builds both the server script and the application in production mode. Use this command when you want to build the project for deployment.                                                                                                                                                                                                                                                                     |
+| <code-example format="shell" language="shell"> npm run serve:ssr </code-example>                          | Starts the server script for serving the application locally with server-side rendering. It uses the build artifacts created by `ng run build:ssr`, so make sure you have run that command as well. <div class="alert is-helpful"> **NOTE**: <br /> `serve:ssr` is not intended to be used to serve your application in production, but only for testing the server-side rendered application locally. </div> |
+| <code-example format="shell" language="shell"> npm run prerender </code-example>                          | Used to prerender an application's pages. Read more about prerendering [here](guide/prerendering).                                                                                                                                                                                                                                                                                                            |
 
 <!-- links -->
 

aio/content/guide/upgrade-setup.md

@@ -1,6 +1,6 @@
 # Setup for upgrading from AngularJS
 
-<!--tode: Question: Can we remove this file and instead direct readers to https://github.com/angular/quickstart/blob/master/README.md -->
+<!--todo: Question: Can we remove this file and instead direct readers to https://github.com/angular/quickstart/blob/master/README.md -->
 
 <div class="alert is-critical">
 

aio/content/guide/upgrade.md

@@ -364,7 +364,7 @@ The result is an AngularJS *directive*, which you can then register in the Angul
 <div class="alert is-helpful">
 
 By default, Angular change detection will also run on the component for everyAngularJS `$digest` cycle.
-If you want to only have change detection run whenthe inputs change, you can set `propagateDigest` to `false` when calling`downgradeComponent()`.
+If you want to only have change detection run when the inputs change, you can set `propagateDigest` to `false` when calling`downgradeComponent()`.
 
 </div>