diff --git a/aio/README.md b/aio/README.md index ac98c73a130..12e370194ad 100644 --- a/aio/README.md +++ b/aio/README.md @@ -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. diff --git a/aio/aio-builds-setup/docs/image-config--environment-variables.md b/aio/aio-builds-setup/docs/image-config--environment-variables.md index 8d380ff70d1..e0ab89edab6 100644 --- a/aio/aio-builds-setup/docs/image-config--environment-variables.md +++ b/aio/aio-builds-setup/docs/image-config--environment-variables.md @@ -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. diff --git a/aio/aio-builds-setup/docs/overview--general.md b/aio/aio-builds-setup/docs/overview--general.md index 6d1ec61ba1d..bd03bdd1049 100644 --- a/aio/aio-builds-setup/docs/overview--general.md +++ b/aio/aio-builds-setup/docs/overview--general.md @@ -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: `//` (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-.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.: `///path/to/resource` More info on the possible HTTP status codes and their meaning can be found diff --git a/aio/aio-builds-setup/docs/overview--http-status-codes.md b/aio/aio-builds-setup/docs/overview--http-status-codes.md index 170e66a865d..f04c2e53d8b 100644 --- a/aio/aio-builds-setup/docs/overview--http-status-codes.md +++ b/aio/aio-builds-setup/docs/overview--http-status-codes.md @@ -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. diff --git a/aio/aio-builds-setup/docs/overview--security-model.md b/aio/aio-builds-setup/docs/overview--security-model.md index b39082fecf0..81cd7a9a7da 100644 --- a/aio/aio-builds-setup/docs/overview--security-model.md +++ b/aio/aio-builds-setup/docs/overview--security-model.md @@ -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). diff --git a/aio/aio-builds-setup/docs/vm-setup--start-docker-container.md b/aio/aio-builds-setup/docs/vm-setup--start-docker-container.md index 778f52cfd39..91e3aa5f307 100644 --- a/aio/aio-builds-setup/docs/vm-setup--start-docker-container.md +++ b/aio/aio-builds-setup/docs/vm-setup--start-docker-container.md @@ -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: ``` diff --git a/aio/content/errors/NG6100.md b/aio/content/errors/NG6100.md index ffcd8311343..1983769efc4 100644 --- a/aio/content/errors/NG6100.md +++ b/aio/content/errors/NG6100.md @@ -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. diff --git a/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts b/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts index cb68fb3711a..432621f4fd4 100644 --- a/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts +++ b/aio/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts @@ -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'] }) diff --git a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts index d9004a9c9b2..3869aeab87c 100644 --- a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts +++ b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts @@ -497,7 +497,7 @@ describe('demo (with TestBed):', () => { @Component({ template: '' }) 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] diff --git a/aio/content/extended-diagnostics/index.md b/aio/content/extended-diagnostics/index.md index a506bb323ca..9a23e9def4d 100644 --- a/aio/content/extended-diagnostics/index.md +++ b/aio/content/extended-diagnostics/index.md @@ -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\) diff --git a/aio/content/guide/angular-package-format.md b/aio/content/guide/angular-package-format.md index ef9efadd45c..83a12a8ea39 100644 --- a/aio/content/guide/angular-package-format.md +++ b/aio/content/guide/angular-package-format.md @@ -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). @@ -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 @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 diff --git a/aio/content/guide/binding-syntax.md b/aio/content/guide/binding-syntax.md index 149358e57d9..790f2128553 100644 --- a/aio/content/guide/binding-syntax.md +++ b/aio/content/guide/binding-syntax.md @@ -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). diff --git a/aio/content/guide/build.md b/aio/content/guide/build.md index 971fb822ef6..7598a06e72a 100644 --- a/aio/content/guide/build.md +++ b/aio/content/guide/build.md @@ -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`: diff --git a/aio/content/guide/built-in-directives.md b/aio/content/guide/built-in-directives.md index 4ebb565b23b..54f1e2dbf1d 100644 --- a/aio/content/guide/built-in-directives.md +++ b/aio/content/guide/built-in-directives.md @@ -179,7 +179,7 @@ To add or remove an element, bind `*ngIf` to a condition expression such as `isA 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`. @@ -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. @@ -271,7 +271,7 @@ With the `*ngFor` `trackBy` property, Angular can change and re-render only thos -1. In the short hand expression, set `trackBy` to the `trackByItems()` method. +1. In the shorthand expression, set `trackBy` to the `trackByItems()` method. diff --git a/aio/content/guide/cli-builder.md b/aio/content/guide/cli-builder.md index 1a58a410cc1..a1a7dc69ac0 100644 --- a/aio/content/guide/cli-builder.md +++ b/aio/content/guide/cli-builder.md @@ -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. diff --git a/aio/content/guide/complex-animation-sequences.md b/aio/content/guide/complex-animation-sequences.md index c85f484fccf..ff47e912516 100644 --- a/aio/content/guide/complex-animation-sequences.md +++ b/aio/content/guide/complex-animation-sequences.md @@ -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. diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md index 42b9ce0faa7..209b2301eee 100644 --- a/aio/content/guide/component-interaction.md +++ b/aio/content/guide/component-interaction.md @@ -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. diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md index 3bcbcc6d5b4..6bd525dc385 100644 --- a/aio/content/guide/component-styles.md +++ b/aio/content/guide/component-styles.md @@ -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` diff --git a/aio/content/guide/contributors-guide-overview.md b/aio/content/guide/contributors-guide-overview.md index 49b7db5f70a..a928f002a4b 100644 --- a/aio/content/guide/contributors-guide-overview.md +++ b/aio/content/guide/contributors-guide-overview.md @@ -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. diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md index 34385ab13c9..29af172f920 100644 --- a/aio/content/guide/dependency-injection-in-action.md +++ b/aio/content/guide/dependency-injection-in-action.md @@ -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 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. diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index c3bfe7299d0..e4a712b9d54 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -139,7 +139,7 @@ To deploy your Angular application to [GitHub Pages](https://help.github.com/art -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
-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.
@@ -170,7 +170,7 @@ This section covers changes you may have to make to the server or to files deplo -### 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 diff --git a/aio/content/guide/deprecations.md b/aio/content/guide/deprecations.md index 1621c777971..f8d2f727837 100644 --- a/aio/content/guide/deprecations.md +++ b/aio/content/guide/deprecations.md @@ -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. diff --git a/aio/content/guide/devtools.md b/aio/content/guide/devtools.md index 92adb7999ce..09ef2a15a00 100644 --- a/aio/content/guide/devtools.md +++ b/aio/content/guide/devtools.md @@ -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.
@@ -154,7 +154,7 @@ The **Profiler** tab lets you preview the execution of Angular's change detectio
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**. diff --git a/aio/content/guide/docs-lint-errors.md b/aio/content/guide/docs-lint-errors.md index c12cd7ccbb6..635d36f76f6 100644 --- a/aio/content/guide/docs-lint-errors.md +++ b/aio/content/guide/docs-lint-errors.md @@ -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 diff --git a/aio/content/guide/docs-style-guide.md b/aio/content/guide/docs-style-guide.md index d291514c1b6..c50e4b79673 100644 --- a/aio/content/guide/docs-style-guide.md +++ b/aio/content/guide/docs-style-guide.md @@ -577,7 +577,7 @@ Use `#docregion` in source files to mark code for use in `` or ` diff --git a/aio/content/guide/event-binding.md b/aio/content/guide/event-binding.md index 4a9244043bc..fabd52c722a 100644 --- a/aio/content/guide/event-binding.md +++ b/aio/content/guide/event-binding.md @@ -71,13 +71,13 @@ Combinations of keys can be separated by a `.` (period). For example, `keydown.e ``` -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 ``` -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. diff --git a/aio/content/guide/file-structure.md b/aio/content/guide/file-structure.md index fb3e69f4cb8..edd9e4df4d1 100644 --- a/aio/content/guide/file-structure.md +++ b/aio/content/guide/file-structure.md @@ -83,7 +83,7 @@ Subfolders contain the application source and application-specific configuration
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).
diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index 396efdad002..571787efeee 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -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. diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md index b4b16565aa4..b74c1660fd6 100644 --- a/aio/content/guide/hierarchical-dependency-injection.md +++ b/aio/content/guide/hierarchical-dependency-injection.md @@ -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. @@ -895,7 +895,7 @@ Instead, you can provide the `VillainsService` in the `providers` metadata of th -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`.
diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md index 6de0024dc79..aa68030654c 100644 --- a/aio/content/guide/http.md +++ b/aio/content/guide/http.md @@ -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: diff --git a/aio/content/guide/i18n-common-merge.md b/aio/content/guide/i18n-common-merge.md index 4be824a8d8f..2d8ce3227d4 100644 --- a/aio/content/guide/i18n-common-merge.md +++ b/aio/content/guide/i18n-common-merge.md @@ -14,7 +14,7 @@ For more information about how to serve each distributable copy of the applicati
-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.
diff --git a/aio/content/guide/image-directive-setup.md b/aio/content/guide/image-directive-setup.md index 757d2edcb54..af5a28a1029 100644 --- a/aio/content/guide/image-directive-setup.md +++ b/aio/content/guide/image-directive-setup.md @@ -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. diff --git a/aio/content/guide/image-directive.md b/aio/content/guide/image-directive.md index c517df97a2b..b1db651da7d 100644 --- a/aio/content/guide/image-directive.md +++ b/aio/content/guide/image-directive.md @@ -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 diff --git a/aio/content/guide/language-service.md b/aio/content/guide/language-service.md index 6dcc345e0cc..7f621246a10 100644 --- a/aio/content/guide/language-service.md +++ b/aio/content/guide/language-service.md @@ -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. diff --git a/aio/content/guide/migration-localize.md b/aio/content/guide/migration-localize.md index 375aa1d8a8e..64f4d71bd7b 100644 --- a/aio/content/guide/migration-localize.md +++ b/aio/content/guide/migration-localize.md @@ -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 —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 `$localize` to the global scope. +This has the side effect of attaching a minimal implementation of `$localize` to the global scope. If this import is missing, you will see an error message like this: diff --git a/aio/content/guide/migration-renderer.md b/aio/content/guide/migration-renderer.md index a7d56851066..ede1225f03e 100644 --- a/aio/content/guide/migration-renderer.md +++ b/aio/content/guide/migration-renderer.md @@ -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? diff --git a/aio/content/guide/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md index 9fcb4b68a20..cc23c7456c4 100644 --- a/aio/content/guide/ngmodule-faq.md +++ b/aio/content/guide/ngmodule-faq.md @@ -51,7 +51,7 @@ This error often means that you haven't declared the directive "x" or haven't im
-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.
@@ -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. diff --git a/aio/content/guide/ngmodule-vs-jsmodule.md b/aio/content/guide/ngmodule-vs-jsmodule.md index dce30500ba8..13c01b07fdb 100644 --- a/aio/content/guide/ngmodule-vs-jsmodule.md +++ b/aio/content/guide/ngmodule-vs-jsmodule.md @@ -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. diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md index 491e5f2547d..3ee48eaf83e 100644 --- a/aio/content/guide/pipes.md +++ b/aio/content/guide/pipes.md @@ -318,7 +318,7 @@ Observables can deliver single or multiple values of any type, either synchronou
-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").
diff --git a/aio/content/guide/releases.md b/aio/content/guide/releases.md index 3e019ea2d86..44b7a4cb056 100644 --- a/aio/content/guide/releases.md +++ b/aio/content/guide/releases.md @@ -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 — 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"). diff --git a/aio/content/guide/roadmap.md b/aio/content/guide/roadmap.md index 92448174167..414c52f5e8c 100644 --- a/aio/content/guide/roadmap.md +++ b/aio/content/guide/roadmap.md @@ -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 diff --git a/aio/content/guide/router-tutorial-toh.md b/aio/content/guide/router-tutorial-toh.md index 29fc7f2e926..2397b480062 100644 --- a/aio/content/guide/router-tutorial-toh.md +++ b/aio/content/guide/router-tutorial-toh.md @@ -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: @@ -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. diff --git a/aio/content/guide/schematics-authoring.md b/aio/content/guide/schematics-authoring.md index fa5dac53ca8..2c9ba52539b 100644 --- a/aio/content/guide/schematics-authoring.md +++ b/aio/content/guide/schematics-authoring.md @@ -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`. diff --git a/aio/content/guide/schematics.md b/aio/content/guide/schematics.md index bbc57fa15b3..bd81e1cafc0 100644 --- a/aio/content/guide/schematics.md +++ b/aio/content/guide/schematics.md @@ -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 diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md index 9d1e5f8bc5b..7946336b92f 100644 --- a/aio/content/guide/security.md +++ b/aio/content/guide/security.md @@ -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: diff --git a/aio/content/guide/service-worker-devops.md b/aio/content/guide/service-worker-devops.md index 6d6e20a6e42..2334ea38d55 100644 --- a/aio/content/guide/service-worker-devops.md +++ b/aio/content/guide/service-worker-devops.md @@ -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
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`. diff --git a/aio/content/guide/service-worker-getting-started.md b/aio/content/guide/service-worker-getting-started.md index 09488bea2f2..cb8d1df21d7 100644 --- a/aio/content/guide/service-worker-getting-started.md +++ b/aio/content/guide/service-worker-getting-started.md @@ -85,7 +85,7 @@ To simulate a network issue, disable network interaction for your application. In Chrome: -1. Select **Tools** > **Developer Tools** \(from the Chrome menu located at the top right corner\). +1. Select **Tools** > **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. diff --git a/aio/content/guide/standalone-components.md b/aio/content/guide/standalone-components.md index 906fc195526..2e8e9e5a59a 100644 --- a/aio/content/guide/standalone-components.md +++ b/aio/content/guide/standalone-components.md @@ -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. diff --git a/aio/content/guide/static-query-migration.md b/aio/content/guide/static-query-migration.md index f2042c7a012..c980e7a930c 100644 --- a/aio/content/guide/static-query-migration.md +++ b/aio/content/guide/static-query-migration.md @@ -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 —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. diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md index d3e533093a1..8274d1bdfbc 100644 --- a/aio/content/guide/styleguide.md +++ b/aio/content/guide/styleguide.md @@ -97,7 +97,7 @@ A single component can be the default export for its file which facilitates lazy -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
**Why**?
-The Angular HTML parser is case sensitive and recognizes lower camel case. +The Angular HTML parser is case-sensitive and recognizes lower camel case.
diff --git a/aio/content/guide/testing-components-basics.md b/aio/content/guide/testing-components-basics.md index 544a79a4bbc..afc08ad8a63 100644 --- a/aio/content/guide/testing-components-basics.md +++ b/aio/content/guide/testing-components-basics.md @@ -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()`. diff --git a/aio/content/guide/testing-components-scenarios.md b/aio/content/guide/testing-components-scenarios.md index 256d9ff9549..ffcf854c811 100644 --- a/aio/content/guide/testing-components-scenarios.md +++ b/aio/content/guide/testing-components-scenarios.md @@ -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`: @@ -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()`. diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md index da33d99d509..8766e9702ec 100644 --- a/aio/content/guide/testing.md +++ b/aio/content/guide/testing.md @@ -278,7 +278,7 @@ This article explains how to configure your project to run Circle CI and Travis - name: CI Angular app through Github Actions + name: CI Angular app through GitHub Actions on: push jobs: build: diff --git a/aio/content/guide/transition-and-triggers.md b/aio/content/guide/transition-and-triggers.md index 17932b85a38..5bed3f18acc 100644 --- a/aio/content/guide/transition-and-triggers.md +++ b/aio/content/guide/transition-and-triggers.md @@ -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
diff --git a/aio/content/guide/typed-forms.md b/aio/content/guide/typed-forms.md index f0fe691cfc9..c8d6421d703 100644 --- a/aio/content/guide/typed-forms.md +++ b/aio/content/guide/typed-forms.md @@ -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`: diff --git a/aio/content/guide/updating-search-keywords.md b/aio/content/guide/updating-search-keywords.md index 15fb4a43657..0a90443d87c 100644 --- a/aio/content/guide/updating-search-keywords.md +++ b/aio/content/guide/updating-search-keywords.md @@ -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) diff --git a/aio/content/guide/upgrade-performance.md b/aio/content/guide/upgrade-performance.md index be0254ae763..1a2126d0951 100644 --- a/aio/content/guide/upgrade-performance.md +++ b/aio/content/guide/upgrade-performance.md @@ -128,7 +128,7 @@ You define that recipe by providing a factory function that can create an instan * `NgModuleFactory` * `(extraProviders: StaticProvider[]) => Promise` -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`—which requires some extra steps— `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: diff --git a/aio/content/guide/upgrade-setup.md b/aio/content/guide/upgrade-setup.md index b3fcdb4fa70..d895a67a7be 100644 --- a/aio/content/guide/upgrade-setup.md +++ b/aio/content/guide/upgrade-setup.md @@ -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 diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md index 7c013e0fc4b..f2a7f3571d3 100644 --- a/aio/content/guide/upgrade.md +++ b/aio/content/guide/upgrade.md @@ -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 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: -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. diff --git a/aio/content/guide/user-input.md b/aio/content/guide/user-input.md index 1bee27f2f1a..655bda572f7 100644 --- a/aio/content/guide/user-input.md +++ b/aio/content/guide/user-input.md @@ -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 `` element, refers to the `` element itself. The code uses the `box` variable to get the input element's `value` and display it with interpolation between `

` 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. diff --git a/aio/content/guide/workspace-config.md b/aio/content/guide/workspace-config.md index ec07a206203..0dc5ea0319a 100644 --- a/aio/content/guide/workspace-config.md +++ b/aio/content/guide/workspace-config.md @@ -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: diff --git a/aio/content/guide/zone.md b/aio/content/guide/zone.md index b625271431d..229842010f8 100644 --- a/aio/content/guide/zone.md +++ b/aio/content/guide/zone.md @@ -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. diff --git a/aio/content/marketing/README.md b/aio/content/marketing/README.md index a4ed144b862..4b36871f5f5 100644 --- a/aio/content/marketing/README.md +++ b/aio/content/marketing/README.md @@ -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. - + * Ours: https://angular.io/about?group=GDE which is derived from `contributors.json`. diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md index cd74c9db8e4..ef23ca774ee 100644 --- a/aio/content/marketing/docs.md +++ b/aio/content/marketing/docs.md @@ -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. diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html index d17b8c713f7..9983dd3e0fa 100755 --- a/aio/content/marketing/features.html +++ b/aio/content/marketing/features.html @@ -38,7 +38,7 @@

Code Generation
-

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.

+

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.

diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html index ae30612190f..00728806922 100644 --- a/aio/content/marketing/presskit.html +++ b/aio/content/marketing/presskit.html @@ -517,7 +517,7 @@ projects by tying them to a point in time of Angular, or will require renaming over time.

- 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.

Do not use diff --git a/aio/content/special-elements/README.md b/aio/content/special-elements/README.md index 87f4faff74c..f78180eacb5 100644 --- a/aio/content/special-elements/README.md +++ b/aio/content/special-elements/README.md @@ -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`\). diff --git a/aio/content/special-elements/core/ng-container.md b/aio/content/special-elements/core/ng-container.md index 7cfac4a50ef..15ebceb1dd5 100644 --- a/aio/content/special-elements/core/ng-container.md +++ b/aio/content/special-elements/core/ng-container.md @@ -22,7 +22,7 @@ For example, we may want to have a number of elements shown conditionally but th -This can also be augmented with the an else statement alongside an `` as: +This can also be augmented with an `else` statement alongside an `` as: diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md index 25ece3b627d..1ab88bcce4d 100644 --- a/aio/content/tutorial/toh-pt1.md +++ b/aio/content/tutorial/toh-pt1.md @@ -120,7 +120,7 @@ Users should be able to edit the hero's name in an `` 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 `` form element and the `hero.name` property. +To automate that data flow, set up a two-way data binding between the `` 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` diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md index 1294450f9e7..1df7daf25e0 100644 --- a/aio/content/tutorial/toh-pt3.md +++ b/aio/content/tutorial/toh-pt3.md @@ -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: diff --git a/aio/src/app/custom-elements/api/api-list.component.spec.ts b/aio/src/app/custom-elements/api/api-list.component.spec.ts index 1f79d2e6001..02e9580e526 100644 --- a/aio/src/app/custom-elements/api/api-list.component.spec.ts +++ b/aio/src/app/custom-elements/api/api-list.component.spec.ts @@ -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 => { diff --git a/aio/src/styles/README.md b/aio/src/styles/README.md index 2fd59b41433..a80cbed6735 100644 --- a/aio/src/styles/README.md +++ b/aio/src/styles/README.md @@ -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 `.scss` file with styles for the corresponding area/component and may also contain a `-theme.scss` file with styles related to theming. +Each such subdirectory contains a `.scss` file with styles for the corresponding area/component and may also contain a `-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). diff --git a/aio/tools/doc-linter/README.md b/aio/tools/doc-linter/README.md index eb50de06de8..95c95630028 100644 --- a/aio/tools/doc-linter/README.md +++ b/aio/tools/doc-linter/README.md @@ -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. diff --git a/aio/tools/doc-linter/styles/Angular/Angular_Inclusive.yml b/aio/tools/doc-linter/styles/Angular/Angular_Inclusive.yml index 31fc39f7538..a22bd6efb9c 100644 --- a/aio/tools/doc-linter/styles/Angular/Angular_Inclusive.yml +++ b/aio/tools/doc-linter/styles/Angular/Angular_Inclusive.yml @@ -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'." diff --git a/aio/tools/ng-packages-installer/index.js b/aio/tools/ng-packages-installer/index.js index fe76161b692..d1b8d91853f 100644 --- a/aio/tools/ng-packages-installer/index.js +++ b/aio/tools/ng-packages-installer/index.js @@ -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() { diff --git a/aio/tools/stackblitz-builder/README.md b/aio/tools/stackblitz-builder/README.md index ca841408182..17820fe6500 100644 --- a/aio/tools/stackblitz-builder/README.md +++ b/aio/tools/stackblitz-builder/README.md @@ -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 `
` that makes a post to stackblitz on submit. It contains an `` 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. diff --git a/aio/tools/transforms/README.md b/aio/tools/transforms/README.md index b3547bdf837..721a833e8b6 100644 --- a/aio/tools/transforms/README.md +++ b/aio/tools/transforms/README.md @@ -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).