refactor: fix typos (#18000)

aio/aio-builds-setup/docs/overview--security-model.md

@@ -96,7 +96,7 @@ This section describes how each of the aforementioned sub-tasks is accomplished:
 
 5. **Deploy the artifacts to the corresponding PR's directory.**
 
-   With the preceeding steps, we have verified that the uploaded artifacts have been uploaded by
+   With the preceding steps, we have verified that the uploaded artifacts have been uploaded by
    Travis. Additionally, we have determined whether the PR can be trusted to have its previews
    publicly accessible or whether further verification is necessary. The artifacts will be stored to
    the PR's directory, but will not be publicly accessible unless the PR has been verified.

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.

aio/src/assets/images/home/speed-performance.svg

@@ -259,7 +259,7 @@
                     <path d="M15.1748197,2.88436401 L12.7958773,15.1229617" id="Line-Copy-9"></path>
                     <path d="M1.2029061,0.773628441 L0.767790904,13.2336973" id="Line-Copy-10"></path>
                 </g>
-                <g id="speed-guage" transform="translate(17.000000, 0.000000)">
+                <g id="speed-gauge" transform="translate(17.000000, 0.000000)">
                     <mask id="mask-29" fill="white">
                         <use xlink:href="#path-28"></use>
                     </mask>

aio/src/styles/_mixins.scss

@@ -2,7 +2,7 @@
 
              Media queries
 
- To use these, put this snippet in the approriate selector:
+ To use these, put this snippet in the appropriate selector:
 
      @include bp(tiny) {
          background-color: purple;

aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.spec.js

@@ -101,7 +101,7 @@ describe('addNotYetDocumentedProperty', function() {
   });
 
 
-  it('should not mark documents explicity tagged as `@noDescription`', function() {
+  it('should not mark documents explicitly tagged as `@noDescription`', function() {
     var a, a1, a2, b, b1, b2, c, c1, c2;
     var docs = [
       a = {

aio/tools/transforms/angular-base-package/rendering/indentForMarkdown.js

@@ -21,7 +21,7 @@ module.exports = function() {
             if (newLines.length > 0) {
               newLines.pop();
             } else {
-              // wierd case - first expression in str is an @example
+              // weird case - first expression in str is an @example
               // in this case the :marked appear above the str passed in,
               // so we need to put 'something' into the markdown tag.
               newLines.push(sp + '.');  // '.' is a dummy char

docs/TOOLS.md

@@ -45,7 +45,7 @@ computing the changes being slow, or due to the act of applying those changes
 to the UI. For your application to be performant it is important that the
 process of computing changes is very fast. For best results it should be under
 3 milliseconds in order to leave room for the application logic, the UI updates
-and browser's rendering pipeline to fit withing the 16 millisecond frame
+and browser's rendering pipeline to fit within the 16 millisecond frame
 (assuming the 60 FPS target frame rate).
 
 Change detection profiler repeatedly performs change detection without invoking

integration/language_service_plugin/package.json

@@ -2,7 +2,7 @@
   "name": "language_service_plugin",
   "version": "0.0.0",
   "license": "MIT",
-  "decription": "Angular Langauge Service plugin integration test",
+  "decription": "Angular Language Service plugin integration test",
   "dependencies": {
     "@angular/animations": "file:../../dist/packages-dist/animations",
     "@angular/common": "file:../../dist/packages-dist/common",

packages/animations/browser/test/render/transition_animation_engine_spec.ts

@@ -203,7 +203,7 @@ export function main() {
                 /Unable to listen on the animation trigger "myTrigger" because the provided event is undefined!/);
       });
 
-      it('should retain event listeners and call them for sucessive animation state changes',
+      it('should retain event listeners and call them for successive animation state changes',
          () => {
            const engine = makeEngine();
            const trig = trigger(
@@ -282,7 +282,7 @@ export function main() {
                   '* => *', [style({height: '0px'}), animate(1234, style({height: '100px'}))])
             ]));
 
-        // we do this so that the next transition has a starting value that isnt null
+        // we do this so that the next transition has a starting value that isn't null
         setProperty(element, engine, 'myTrigger', '123');
         engine.flush();
 

packages/benchpress/src/webdriver/chrome_driver_extension.ts

@@ -110,7 +110,7 @@ export class ChromeDriverExtension extends WebDriverExtension {
                    categories, name, ['benchmark'],
                    'BenchmarkInstrumentation::ImplThreadRenderingStats')) {
       // TODO(goderbauer): Instead of BenchmarkInstrumentation::ImplThreadRenderingStats the
-      // following events should be used (if available) for more accurate measurments:
+      // following events should be used (if available) for more accurate measurements:
       //   1st choice: vsync_before - ground truth on Android
       //   2nd choice: BenchmarkInstrumentation::DisplayRenderingStats - available on systems with
       //               new surfaces framework (not broadly enabled yet)

packages/common/src/directives/ng_if.ts

@@ -45,7 +45,7 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '
  * A common pattern is that we need to show a set of properties from the same object. If the
  * object is undefined, then we have to use the safe-traversal-operator `?.` to guard against
  * dereferencing a `null` value. This is especially the case when waiting on async data such as
- * when using the `async` pipe as shown in folowing example:
+ * when using the `async` pipe as shown in following example:
  *
  * ```
  * Hello {{ (userStream|async)?.last }}, {{ (userStream|async)?.first }}!

packages/compiler/src/aot/summary_serializer.ts

@@ -166,7 +166,7 @@ class ToJsonSerializer extends ValueTransformer {
           __symbol: index,
           name: symbol.name,
           // We convert the source filenames tinto output filenames,
-          // as the generated summary file will be used when teh current
+          // as the generated summary file will be used when the current
           // compilation unit is used as a library
           filePath: this.summaryResolver.getLibraryFileName(symbol.filePath),
           importAs: importAs

packages/compiler/test/ml_parser/html_parser_spec.ts

@@ -417,7 +417,7 @@ export function main() {
           expect((ast.rootNodes[0] as html.Element).attrs[0].valueSpan).toBeUndefined();
         });
 
-        it('should report a value span for an attibute with a value', () => {
+        it('should report a value span for an attribute with a value', () => {
           const ast = parser.parse('<div bar="12"></div>', 'TestComp');
           const attr = (ast.rootNodes[0] as html.Element).attrs[0];
           expect(attr.valueSpan !.start.offset).toEqual(9);

packages/core/src/view/types.ts

@@ -89,7 +89,7 @@ export interface ViewHandleEventFn {
 }
 
 /**
- * Bitmask for ViewDefintion.flags.
+ * Bitmask for ViewDefinition.flags.
  */
 export const enum ViewFlags {
   None = 0,

packages/core/test/linker/regression_integration_spec.ts

@@ -242,14 +242,14 @@ function declareTests({useJit}: {useJit: boolean}) {
         return MyComponent;
       }
       const HeroComponent = ComponentFactory('my-hero', 'my hero');
-      const VillianComponent = ComponentFactory('a-villian', 'a villian');
+      const VillainComponent = ComponentFactory('a-villain', 'a villain');
       const MainComponent = ComponentFactory(
-          'my-app', 'I was saved by <my-hero></my-hero> from <a-villian></a-villian>.');
+          'my-app', 'I was saved by <my-hero></my-hero> from <a-villain></a-villain>.');
 
       TestBed.configureTestingModule(
-          {declarations: [HeroComponent, VillianComponent, MainComponent]});
+          {declarations: [HeroComponent, VillainComponent, MainComponent]});
       const fixture = TestBed.createComponent(MainComponent);
-      expect(fixture.nativeElement).toHaveText('I was saved by my hero from a villian.');
+      expect(fixture.nativeElement).toHaveText('I was saved by my hero from a villain.');
     });
 
     it('should allow to use the renderer outside of views', () => {

packages/core/test/util/decorators_spec.ts

@@ -123,7 +123,7 @@ export function main() {
         });
 
 
-        it('should ensure that we dont accidently patch native objects', () => {
+        it('should ensure that we dont accidentally patch native objects', () => {
           expect(() => {
             (<Function>Class)({constructor: Object});
           }).toThrowError('Can not use native Object as constructor');

packages/core/test/view/provider_spec.ts

@@ -172,7 +172,7 @@ export function main() {
               .toThrowError('No provider for Dep!');
         });
 
-        it('should inject from a parent elment in a parent view', () => {
+        it('should inject from a parent element in a parent view', () => {
           createAndGetRootNodes(compViewDef([
             elementDef(
                 NodeFlags.None, null !, null !, 1, 'div', null !, null !, null !, null !,

packages/language-service/src/types.ts

@@ -25,7 +25,7 @@ export {
 
 /**
  * The information `LanguageService` needs from the `LanguageServiceHost` to describe the content of
- * a template and the langauge context the template is in.
+ * a template and the language context the template is in.
  *
  * A host interface; see `LanguageSeriviceHost`.
  *

packages/language-service/test/language_service_spec.ts

@@ -30,7 +30,7 @@ describe('service without angular', () => {
      () => expect(() => ngService.getDiagnostics(fileName)).not.toThrow());
   it('should not crash a completion',
      () => expect(() => ngService.getCompletionsAt(fileName, position)).not.toThrow());
-  it('should not crash a get defintion',
+  it('should not crash a get definition',
      () => expect(() => ngService.getDefinitionAt(fileName, position)).not.toThrow());
   it('should not crash a hover', () => expect(() => ngService.getHoverAt(fileName, position)));
 });

packages/language-service/test/ts_plugin_spec.ts

@@ -142,7 +142,7 @@ describe('plugin', () => {
     it('should reference the component',
        () => { contains('app/parsing-cases.ts', 'test-comp-after-test', 'name'); });
     // TODO: Enable when we have a flag that indicates the project targets the DOM
-    // it('should refernce the element if no component', () => {
+    // it('should reference the element if no component', () => {
     //   contains('app/parsing-cases.ts', 'test-comp-after-div', 'innerText');
     // });
   });
@@ -163,7 +163,7 @@ describe('plugin', () => {
           'app/expression-cases.ts', 'myField',
           'Identifier \'myField\' refers to a private member of the component');
     });
-    it('should report numeric operator erros',
+    it('should report numeric operator errors',
        () => { expectSemanticError('app/expression-cases.ts', 'mod', 'Expected a numeric type'); });
     describe('in ngFor', () => {
       function expectError(locationMarker: string, message: string) {

packages/platform-browser-dynamic/test/testing_public_browser_spec.ts

@@ -31,7 +31,7 @@ class FancyService {
 class ExternalTemplateComp {
 }
 
-@Component({selector: 'bad-template-comp', templateUrl: 'non-existant.html'})
+@Component({selector: 'bad-template-comp', templateUrl: 'non-existent.html'})
 class BadTemplateUrl {
 }
 
@@ -110,7 +110,7 @@ export function main() {
             () => { done.fail('Expected test to fail, but it did not'); },
             (err: any) => {
               expect(err.message)
-                  .toEqual('Uncaught (in promise): Failed to load non-existant.html');
+                  .toEqual('Uncaught (in promise): Failed to load non-existent.html');
               done();
             });
         restoreJasmineIt();

packages/platform-browser/src/security/html_sanitizer.ts

@@ -102,7 +102,7 @@ const HTML_ATTRS = tagSet(
     'scope,scrolling,shape,size,sizes,span,srclang,start,summary,tabindex,target,title,translate,type,usemap,' +
     'valign,value,vspace,width');
 
-// NB: This currently conciously doesn't support SVG. SVG sanitization has had several security
+// NB: This currently consciously doesn't support SVG. SVG sanitization has had several security
 // issues in the past, so it seems safer to leave it out if possible. If support for binding SVG via
 // innerHTML is required, SVG attributes should be added here.
 

packages/platform-webworker/src/web_workers/shared/message_bus.ts

@@ -84,7 +84,7 @@ export interface MessageBusSink {
    * Sets up a new channel on the MessageBusSink.
    * MUST be called before calling to on the channel.
    * If runInZone is true the sink will buffer messages and send only once the zone exits.
-   * if runInZone is false the sink will send messages immediatly.
+   * if runInZone is false the sink will send messages immediately.
    */
   initChannel(channel: string, runInZone: boolean): void;
 

packages/platform-webworker/test/web_workers/shared/message_bus_spec.ts

@@ -142,7 +142,7 @@ export function main() {
                }),
        500);
 
-    it('should send messages immediatly when run outside the zone',
+    it('should send messages immediately when run outside the zone',
        inject([AsyncTestCompleter, NgZone], (async: AsyncTestCompleter, zone: MockNgZone) => {
          bus = createConnectedMessageBus();
          setup(false, zone);

packages/router/src/url_tree.ts

@@ -149,7 +149,7 @@ export class UrlSegmentGroup {
     forEach(children, (v: any, k: any) => v.parent = this);
   }
 
-  /** Wether the segment has child segments */
+  /** Whether the segment has child segments */
   hasChildren(): boolean { return this.numberOfChildren > 0; }
 
   /** Number of child segments */

packages/router/test/integration.spec.ts

@@ -509,7 +509,7 @@ describe('Integration', () => {
        expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right: simple ]');
      })));
 
-  it('should support secondary routes in seperate commands',
+  it('should support secondary routes in separate commands',
      fakeAsync(inject([Router], (router: Router) => {
        const fixture = createRoot(router, RootCmp);
 

tools/@angular/tsc-wrapped/src/evaluator.ts

@@ -375,7 +375,7 @@ export class Evaluator {
         if (expression && this.isFoldable(propertyAccessExpression.expression))
           return (<any>expression)[<string>member];
         if (isMetadataModuleReferenceExpression(expression)) {
-          // A select into a module refrence and be converted into a reference to the symbol
+          // A select into a module reference and be converted into a reference to the symbol
           // in the module
           return recordEntry(
               {__symbolic: 'reference', module: expression.module, name: member}, node);

tools/@angular/tsc-wrapped/src/options.ts

@@ -28,7 +28,7 @@ interface Options extends ts.CompilerOptions {
   // Whether to generate a flat module index of the given name and the corresponding
   // flat module metadata. This option is intended to be used when creating flat
   // modules similar to how `@angular/core` and `@angular/common` are packaged.
-  // When this option is used the `package.json` for the library should refered to the
+  // When this option is used the `package.json` for the library should referred to the
   // generated flat module index instead of the library index file. When using this
   // option only one .metadata.json file is produced that contains all the metadata
   // necessary for symbols exported from the library index.

tools/@angular/tsc-wrapped/test/collector.spec.ts

@@ -920,7 +920,7 @@ const FILES: Directory = {
         }
 
         getHeroes() {
-          this._heroService.getHeroesSlowly().then(heros => this.heroes = heros);
+          this._heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
         }
       }`,
     'hero.ts': `