refactor: fix typos (#18000)

aio/content/examples/architecture/src/app/backend.service.ts

@@ -6,7 +6,7 @@ import { Hero } from './hero';
 const HEROES = [
         new Hero('Windstorm', 'Weather mastery'),
         new Hero('Mr. Nice', 'Killing them with kindness'),
-        new Hero('Magneta', 'Manipulates metalic objects')
+        new Hero('Magneta', 'Manipulates metallic objects')
       ];
 
 @Injectable()

aio/content/examples/component-interaction/src/app/app.module.ts

@@ -39,7 +39,7 @@ if (!/e2e/.test(location.search)) {
   directives.push(CountdownLocalVarParentComponent);
   directives.push(CountdownViewChildParentComponent);
 } else {
-  // In e2e test use CUSTOM_ELEMENTS_SCHEMA to supress unknown element errors
+  // In e2e test use CUSTOM_ELEMENTS_SCHEMA to suppress unknown element errors
   schemas.push(CUSTOM_ELEMENTS_SCHEMA);
 }
 

aio/content/examples/hierarchical-dependency-injection/plnkr.json

@@ -1,5 +1,5 @@
 {
-  "description": "Hierachical Dependency Injection",
+  "description": "Hierarchical Dependency Injection",
   "basePath": "src/",
   "files":[
     "!**/*.d.ts",

aio/content/examples/pipes/e2e-spec.ts

@@ -85,7 +85,7 @@ describe('Pipes', function () {
       return resetEle.click();
     })
     .then(function() {
-       expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore orginal flying heroes');
+       expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes');
     });
   });
 

aio/content/examples/testing/src/app/bag/bag.ts

@@ -273,7 +273,7 @@ export class InnerCompWithExternalTemplateComponent { }
 
 @Component({
   selector: 'bad-template-comp',
-  templateUrl: './non-existant.html'
+  templateUrl: './non-existent.html'
 })
 export class BadTemplateUrlComponent { }
 

aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts

@@ -227,7 +227,7 @@ function heroModuleSetup() {
   // #enddocregion route-no-id
 
   // #docregion route-bad-id
-  describe('when navigate to non-existant hero id', () => {
+  describe('when navigate to non-existent hero id', () => {
     beforeEach( async(() => {
       activatedRoute.testParamMap = { id: 99999 };
       createComponent();

aio/content/guide/dependency-injection-in-action.md

@@ -244,7 +244,7 @@ You can limit the scope of an injected service to a *branch* of the application
 by providing that service *at the sub-root component for that branch*.
 This example shows how similar providing a service to a sub-root component is
 to providing a service in the root `AppComponent`. The syntax is the same.
-Here, the `HeroService` is availble to the `HeroesBaseComponent` because it is in the `providers` array:
+Here, the `HeroService` is available to the `HeroesBaseComponent` because it is in the `providers` array:
 
 <code-example path="dependency-injection-in-action/src/app/sorted-heroes.component.ts" region="injection" title="src/app/sorted-heroes.component.ts (HeroesBaseComponent excerpt)">
 

aio/content/guide/displaying-data.md

@@ -320,7 +320,7 @@ Read more about `ngIf` and `*` in the [ngIf section](guide/template-syntax#ngIf)
 
 
 The template expression inside the double quotes,
-`*ngIf="heros.length > 3"`, looks and behaves much like TypeScript.
+`*ngIf="heroes.length > 3"`, looks and behaves much like TypeScript.
 When the component's list of heroes has more than three items, Angular adds the paragraph
 to the DOM and the message appears. If there are three or fewer items, Angular omits the
 paragraph, so no message appears. For more information,

aio/content/guide/form-validation.md

@@ -168,10 +168,8 @@ on custom validation directives.
 
 * Binding to the new `formErrors.name` property is sufficient to display all name validation error messages.
 
-	
 {@a component-class}
 
-
 ### Component class
 The original component code for Template 1 stayed the same; however,
 Template 2 requires some changes in the component. This section covers the code

aio/content/guide/reactive-forms.md

@@ -614,7 +614,7 @@ If you do not bind the value, the select shows the first option from the data mo
 The component _class_ defines control properties without regard for their representation in the template.
 You define the `state`, `power`, and `sidekick` controls the same way you defined the `name` control.
 You tie these controls to the template HTML elements in the same way,
-specifiying the `FormControl` name with the `formControlName` directive.
+specifying the `FormControl` name with the `formControlName` directive.
 
 See the API reference for more information about
 [radio buttons](api/forms/RadioControlValueAccessor "API: RadioControlValueAccessor"),
@@ -1220,7 +1220,7 @@ Place a button on the form so the user can add a new _secret lair_ and wire it t
 
 Be sure to **add the `type="button"` attribute**.
 In fact, you should always specify a button's `type`.
-Without an explict type, the button type defaults to "submit".
+Without an explicit type, the button type defaults to "submit".
 When you later add a _form submit_ action, every "submit" button triggers the submit action which
 might do something like save the current changes.
 You do not want to save changes when the user clicks the _Add a Secret Lair_ button.

aio/content/guide/setup-systemjs-anatomy.md

@@ -199,7 +199,7 @@ If you do, this page can help you understand their purpose.
 
 
       A list of files that you can delete if you want to purge your setup of the
-      original QuickStart Seed testing and git maintainence artifacts.
+      original QuickStart Seed testing and git maintenance artifacts.
       See instructions in the optional
       [_Deleting non-essential files_](guide/setup#non-essential "Setup: Deleting non-essential files") section.
       *Do this only in the beginning to avoid accidentally deleting your own tests and git setup!*

aio/content/guide/styleguide.md

@@ -3127,7 +3127,7 @@ that may need features from another common module; for example,
 
 
 
-**Why?** A lazy loaded feature module that imports that shared module will make its own copy of the service and likely have undesireable results.
+**Why?** A lazy loaded feature module that imports that shared module will make its own copy of the service and likely have undesirable results.
 
 
 </div>
@@ -3377,7 +3377,7 @@ Yet they're too big and messy to leave loose in the root folder.
 
 
 
-**Why?** A lazily loaded feature module that directly imports the `CoreModule` will make its own copy of services and likely have undesireable results.
+**Why?** A lazily loaded feature module that directly imports the `CoreModule` will make its own copy of services and likely have undesirable results.
 
 
 </div>

aio/content/guide/ts-to-js.md

@@ -431,7 +431,7 @@ by calling the `@Inject()` decorator with the injection token.
 In the following example, the token is the string `'heroName'`.
 
 The other JavaScript dialects add a `parameters` array to the class constructor function.
-Each item constrains a new instance of `Inject`:
+Each item contains a new instance of `Inject`:
 
 * _Plain ES6_—each item is a new instance of `Inject(token)` in a sub-array.
 * _ES5_—simply list the string tokens.