diff --git a/aio/content/cli/usage-analytics-gathering.md b/aio/content/cli/usage-analytics-gathering.md index b9966bacef..77bd4ff41d 100644 --- a/aio/content/cli/usage-analytics-gathering.md +++ b/aio/content/cli/usage-analytics-gathering.md @@ -20,29 +20,27 @@ This ID is a string that looks like `UA-123456-12`. You can choose to use a descriptive string as the key value, or be assigned a random key when you run the CLI command. For example, the following command adds a configuration key named "tracking". - + ng config --global cli.analyticsSharing.tracking UA-123456-12 To turn off this feature, run the following command: - + ng config --global --remove cli.analyticsSharing - ## Per user tracking You can add a custom user ID to the global configuration, in order to identify unique usage of commands and flags. If that user enables CLI analytics for their own project, your analytics display tracks and labels their individual usage. - - + ng config --global cli.analyticsSharing.user SOME_USER_NAME To generate a new random user ID, run the following command: - + ng config --global cli.analyticsSharing.user "" diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md index f58db98aed..285e0638c3 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -14,7 +14,7 @@ This section walks you through creating a highlight directive that sets the back 1. To create a directive, use the CLI command [`ng generate directive`](cli/generate). - + ng generate directive highlight diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md index 576ba367ed..73ac6ea681 100644 --- a/aio/content/guide/browser-support.md +++ b/aio/content/guide/browser-support.md @@ -87,7 +87,7 @@ This file incorporates the mandatory and many of the optional polyfills as JavaS For example, if you need the optional [web animations polyfill](https://caniuse.com/web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent): - + # install the optional web animations polyfill npm install --save web-animations-js diff --git a/aio/content/guide/build.md b/aio/content/guide/build.md index a871bff5b0..48cae98dd4 100644 --- a/aio/content/guide/build.md +++ b/aio/content/guide/build.md @@ -94,6 +94,7 @@ export class AppComponent { title = 'app works!'; } ``` + {@a file-replacement} ## Configure target-specific file replacements @@ -140,7 +141,7 @@ Any option that your build supports can be overridden in a build target configur To build using the staging configuration, run the following command: - + ng build --configuration=staging @@ -503,7 +504,7 @@ module.exports = PROXY_CONFIG; If you work behind a corporate proxy, the backend cannot directly proxy calls to any URL outside your local network. In this case, you can configure the backend proxy to redirect calls through your corporate proxy using an agent: - + npm install --save-dev https-proxy-agent diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md index 271085a7e2..8c2c6aa674 100644 --- a/aio/content/guide/component-styles.md +++ b/aio/content/guide/component-styles.md @@ -170,7 +170,7 @@ They are _not inherited_ by any components nested within the template nor by any The Angular CLI command [`ng generate component`](cli/generate) defines an empty `styles` array when you create the component with the `--inline-style` flag. - + ng generate component hero-app --inline-style @@ -199,7 +199,7 @@ They are _not inherited_ by any components nested within the template nor by any When you use the Angular CLI command [`ng generate component`](cli/generate) without the `--inline-style` flag, it creates an empty styles file for you and references that file in the component's generated `styleUrls`. - + ng generate component hero-app diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md index 63c297c7ec..ab55a1ddd6 100644 --- a/aio/content/guide/dependency-injection.md +++ b/aio/content/guide/dependency-injection.md @@ -16,7 +16,7 @@ See the for a working example containing the code To generate a new `HeroService` class in the `src/app/heroes` folder use the following [Angular CLI](cli) command. - + ng generate service heroes/hero diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index 406b9fbfba..c253f4a8cd 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -29,7 +29,7 @@ You will need two terminals to get the live-reload experience. * On the first terminal, run the [`ng build` command](cli/build) in *watch* mode to compile the application to the `dist` folder. - + ng build --watch @@ -39,7 +39,7 @@ You will need two terminals to get the live-reload experience. * On the second terminal, install a web server (such as [lite-server](https://github.com/johnpapa/lite-server)), and run it against the output folder. For example: - + lite-server --baseDir="dist/project-name" @@ -61,7 +61,7 @@ When you add a package with deployment capability, it'll automatically update yo For example, the following command automatically deploys a project to Firebase. - + ng add @angular/fire ng deploy @@ -90,13 +90,12 @@ For the simplest deployment, create a production build and copy the output direc 1. Start with the production build: - + ng build - 2. Copy _everything_ within the output folder (`dist/project-name/` by default) to a folder on the server. 3. Configure the server to redirect requests for missing files to `index.html`. @@ -121,6 +120,7 @@ To deploy your Angular application to [GitHub Pages](https://help.github.com/art git branch -M main git push -u origin main ``` + When you paste these commands from GitHub, they run automatically. 1. Create and check out a `git` branch named `gh-pages`. @@ -133,7 +133,7 @@ To deploy your Angular application to [GitHub Pages](https://help.github.com/art Be sure to include the slashes on either side of your project name as in `/your_project_name/`. - + ng build --output-path docs --base-href /your_project_name/ @@ -222,7 +222,7 @@ modified to serve `index.html`: * [Ruby](https://www.ruby-lang.org/): create a Ruby server using ([sinatra](http://sinatrarb.com/)) with a basic Ruby file that configures the server `server.rb`: - ``` ruby + ```ruby require 'sinatra' # Folder structure @@ -385,7 +385,7 @@ tool is a great way to inspect the generated JavaScript bundles after a producti Install `source-map-explorer`: - + npm install source-map-explorer --save-dev @@ -393,7 +393,7 @@ Install `source-map-explorer`: Build your application for production _including the source maps_ - + ng build --source-map @@ -401,7 +401,7 @@ Build your application for production _including the source maps_ List the generated bundles in the `dist/project-name/` folder. - + ls dist/project-name/*.js @@ -410,7 +410,7 @@ List the generated bundles in the `dist/project-name/` folder. Run the explorer to generate a graphical representation of one of the bundles. The following example displays the graph for the _main_ bundle. - + node_modules/.bin/source-map-explorer dist/project-name/main* @@ -657,7 +657,7 @@ In `angular.json` add two new configuration sections under the `build` and `serv You can then run the `ng serve` command with this configuration. Make sure to replace `` (in `":build:es5"`) with the actual name of the app, as it appears under `projects` in `angular.json`. For example, if your application name is `myAngularApp` the configuration will become `"browserTarget": "myAngularApp:build:es5"`. - + ng serve --configuration es5 @@ -698,7 +698,7 @@ Create a new file, `tsconfig-es5.spec.json` next to `tsconfig.spec.json` with th You can then run the tests with this configuration - + ng test --configuration es5 diff --git a/aio/content/guide/docs-style-guide.md b/aio/content/guide/docs-style-guide.md index 446a46848f..f30dd20fda 100644 --- a/aio/content/guide/docs-style-guide.md +++ b/aio/content/guide/docs-style-guide.md @@ -249,16 +249,16 @@ The item property is `true`. Ideally, you should source code snippets [from working sample code](#from-code-samples), though there are times when an inline snippet is necessary. -For terminal input and output, place the content between `` tags, set the CSS class to `code-shell`, and set the language attribute to `sh` as in this example: +For terminal input and output, place the content between `` tags and set the language attribute to `sh` as in this example: - + npm start ```html - + npm start @@ -405,7 +405,7 @@ Specify the `` output with the following attributes: The `number` option starts line numbering at the given value. For example, `linenums=4` sets the starting line number to 4. -* `class`: code snippets can be styled with the CSS classes `no-box`, `code-shell`, and `avoid`. +* `class`: code snippets can be styled with the CSS classes `no-box` and `avoid`. * `hideCopy`: hides the copy button. diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md index 63c1f4804b..e631f9b594 100644 --- a/aio/content/guide/i18n.md +++ b/aio/content/guide/i18n.md @@ -69,7 +69,7 @@ The following are optional practices that may be required in special cases: To take advantage of Angular's localization features, use the Angular CLI to add the `@angular/localize` package to your project: - + ng add @angular/localize @@ -343,7 +343,7 @@ You can optionally change the location, format, and name. To extract the source language file, open a terminal window, change to the root directory of your app project, and run the following CLI command: - + ng extract-i18n @@ -362,7 +362,7 @@ Angular 9 uses the source locale configured in your app's [workspace configurati To create a file in the `src/locale` directory, specify the output path as an option, as shown in the following example: - + ng extract-i18n --output-path src/locale @@ -378,7 +378,7 @@ The `extract-i18n` command can read and write files in three translation formats Specify the translation format explicitly with the `--format` command option, as shown in the following examples: - + ng extract-i18n --format=xlf ng extract-i18n --format=xlf2 ng extract-i18n --format=xmb @@ -396,7 +396,7 @@ ng extract-i18n --format=xmb To change the name of the source language file generated by the extraction tool, use the `--outFile` command option: - + ng extract-i18n --out-file source.xlf @@ -641,7 +641,7 @@ You can set the `"localize"` property as a shared configuration that all the con You can also use the `--localize` option with the [`ng build`](/cli/build "CLI reference for ng build") command and your existing `production` configuration. The CLI builds all locales defined in the build configuration, which is similar to setting the `"localize"` option to `true` as described in the previous section. - + ng build --localize @@ -677,7 +677,7 @@ To apply specific build options to only one locale, you can create a custom loca You can then pass this configuration to the `ng serve` or `ng build` commands. The following shows how to serve the French language file created in the example for this guide: - + ng serve --configuration=fr @@ -689,7 +689,7 @@ You can use the CLI development server (`ng serve`), but only with a single loca For production builds, you can use configuration composition to execute both configurations: - + ng build --configuration=production,fr diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index 367c14a102..fb2c0ed35e 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -267,7 +267,7 @@ Create a resolver service. With the CLI, the command to generate a service is as follows: - + ng generate service diff --git a/aio/content/guide/npm-packages.md b/aio/content/guide/npm-packages.md index a5d0bf57d2..8f36a15c00 100644 --- a/aio/content/guide/npm-packages.md +++ b/aio/content/guide/npm-packages.md @@ -102,11 +102,11 @@ The packages listed in the `devDependencies` section of `package.json` help you To add a new `devDependency`, use either one of the following commands: - + npm install --save-dev <package-name> - + yarn add --dev <package-name> diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md index 528b35782c..4237ca5029 100644 --- a/aio/content/guide/reactive-forms.md +++ b/aio/content/guide/reactive-forms.md @@ -50,7 +50,7 @@ To use reactive form controls, import `ReactiveFormsModule` from the `@angular/f Use the [CLI command](cli "Using the Angular command-line interface.") `ng generate` to generate a component in your project to host the control. - + ng generate component NameEditor @@ -146,7 +146,7 @@ Just as a form control instance gives you control over a single input field, a f Generate a `ProfileEditor` component and import the `FormGroup` and `FormControl` classes from the `@angular/forms` package. - + ng generate component ProfileEditor diff --git a/aio/content/guide/router-tutorial-toh.md b/aio/content/guide/router-tutorial-toh.md index 3e1ebe0eb7..30441c15fe 100644 --- a/aio/content/guide/router-tutorial-toh.md +++ b/aio/content/guide/router-tutorial-toh.md @@ -130,7 +130,7 @@ Begin with a basic version of the app that navigates between two empty views. Generate a sample application with the Angular CLI. - + ng new angular-router-sample @@ -152,11 +152,11 @@ The first configuration defines an array of two routes with minimal paths leadin Generate the `CrisisList` and `HeroList` components so that the router has something to render. - + ng generate component crisis-list - + ng generate component hero-list @@ -250,7 +250,7 @@ Instead of adding the `"/sidekicks"` route, define a `wildcard` route and have i Create the `PageNotFoundComponent` to display when users visit invalid URLs. - + ng generate component page-not-found @@ -550,7 +550,7 @@ The file includes an empty `Routes` object that you can fill with routes to diff Create an `AppRouting` module in the `/app` folder to contain the routing configuration. - + ng generate module app-routing --module app --flat @@ -626,7 +626,7 @@ Follow these steps: * To manage the heroes, create a `HeroesModule` with routing in the heroes folder and register it with the root `AppModule`. - + ng generate module heroes/heroes --module app --flat --routing @@ -1564,7 +1564,7 @@ If your app had many feature areas, the app component trees might look like this Generate a `CrisisCenter` component in the `crisis-center` folder: - + ng generate component crisis-center/crisis-center @@ -1585,7 +1585,7 @@ Like most shells, the `CrisisCenterComponent` class is minimal because it has no As a host page for the "Crisis Center" feature, generate a `CrisisCenterHome` component in the `crisis-center` folder. - + ng generate component crisis-center/crisis-center-home @@ -1758,7 +1758,7 @@ They differ in a few key respects. Generate a new component to compose the message. - + ng generate component compose-message @@ -1966,25 +1966,25 @@ Start by adding a new feature module named `AdminModule`. Generate an `admin` folder with a feature module file and a routing configuration file. - + ng generate module admin --routing Next, generate the supporting components. - + ng generate component admin/admin-dashboard - + ng generate component admin/admin - + ng generate component admin/manage-crises - + ng generate component admin/manage-heroes @@ -2161,7 +2161,7 @@ login page when they try to enter the admin area. Generate an `AuthGuard` in the `auth` folder. - + ng generate guard auth/auth @@ -2184,7 +2184,7 @@ Make the `AuthGuard` mimic authentication. The `AuthGuard` should call an application service that can login a user and retain information about the current user. Generate a new `AuthService` in the `auth` folder: - + ng generate service auth/auth @@ -2224,7 +2224,7 @@ Returning a `UrlTree` tells the `Router` to cancel the current navigation and sc You need a `LoginComponent` for the user to log in to the app. After logging in, you'll redirect to the stored URL if available, or use the default URL. There is nothing new about this component or the way you use it in the router configuration. - + ng generate component auth/login @@ -2323,7 +2323,7 @@ You could wait for the user's answer with synchronous, blocking code, however, t Generate a `Dialog` service to handle user confirmation. - + ng generate service dialog @@ -2338,7 +2338,7 @@ It returns an `Observable` that resolves when the user eventually decides what t Generate a guard that checks for the presence of a `canDeactivate()` method in a component—any component. - + ng generate guard can-deactivate @@ -2400,7 +2400,7 @@ A `CrisisDetailResolver` service could retrieve a `Crisis` or navigate away, if Generate a `CrisisDetailResolver` service file within the `Crisis Center` feature area. - + ng generate service crisis-center/crisis-detail-resolver @@ -2774,7 +2774,7 @@ Set the `data.preload` flag in the `crisis-center` route in the `AppRoutingModul Generate a new `SelectivePreloadingStrategy` service. - + ng generate service selective-preloading-strategy diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index 862ba3f028..75a182af42 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -25,7 +25,7 @@ For a more in-depth experience of building an Angular app, see the [Tour of Hero The following command uses the Angular CLI to generate a basic Angular app with an app routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes. The app name in the following example is `routing-app`. - + ng new routing-app --routing @@ -36,14 +36,14 @@ For this example, accept the default of `CSS`. To use the Angular router, an app needs to have at least two components so that it can navigate from one to the other. To create a component using the CLI, enter the following at the command line where `first` is the name of your component: - + ng generate component first Repeat this step for a second component but give it a different name. Here, the new name is `second`. - + ng generate component second @@ -376,7 +376,7 @@ To use route guards, consider using [component-less routes](api/router/Route#com Create a service for your guard: - + ng generate guard your-guard diff --git a/aio/content/guide/setup-local.md b/aio/content/guide/setup-local.md index 4a49c8aa97..c74758e1ea 100644 --- a/aio/content/guide/setup-local.md +++ b/aio/content/guide/setup-local.md @@ -1,10 +1,8 @@ # Setting up the local environment and workspace - This guide explains how to set up your environment for Angular development using the [Angular CLI tool](cli "CLI command reference"). It includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup. -
Try Angular without local setup
@@ -60,7 +58,7 @@ You use the Angular CLI to create projects, generate application and library cod To install the Angular CLI, open a terminal window and run the following command: - + npm install -g @angular/cli @@ -74,7 +72,7 @@ To create a new workspace and initial starter app: 1. Run the CLI command `ng new` and provide the name `my-app`, as shown here: - + ng new my-app @@ -95,7 +93,7 @@ The Angular CLI includes a server, so that you can build and serve your app loca 1. Run the following command: - + cd my-app ng serve --open diff --git a/aio/content/guide/strict-mode.md b/aio/content/guide/strict-mode.md index 93597db21c..b0ea0d69df 100644 --- a/aio/content/guide/strict-mode.md +++ b/aio/content/guide/strict-mode.md @@ -15,7 +15,7 @@ You can apply these settings at the workspace and project level. Using the basic `ng new` command to create a new workspace and application automatically uses strict mode, as in the following command: - + ng new [project-name] @@ -23,7 +23,7 @@ ng new [project-name] To create a new application in the strict mode within an existing non-strict workspace, run the following command: - + ng generate application [project-name] --strict diff --git a/aio/content/guide/testing-code-coverage.md b/aio/content/guide/testing-code-coverage.md index 2432a9255f..e560fa5673 100644 --- a/aio/content/guide/testing-code-coverage.md +++ b/aio/content/guide/testing-code-coverage.md @@ -7,16 +7,16 @@ Code coverage reports show you any parts of your code base that may not be prope
- For the sample app that the testing guides describe, see the sample app. +For the sample app that the testing guides describe, see the sample app. - For the tests features in the testing guides, see tests. +For the tests features in the testing guides, see tests.
To generate a coverage report run the following command in the root of your project. - + ng test --no-watch --code-coverage diff --git a/aio/content/guide/testing-components-basics.md b/aio/content/guide/testing-components-basics.md index 316aba4f6d..6f136ac4a1 100644 --- a/aio/content/guide/testing-components-basics.md +++ b/aio/content/guide/testing-components-basics.md @@ -145,7 +145,7 @@ generate a new component. For example, the following CLI command generates a `BannerComponent` in the `app/banner` folder (with inline template and styles): - + ng generate component banner --inline-template --inline-style --module app diff --git a/aio/content/guide/testing-components-scenarios.md b/aio/content/guide/testing-components-scenarios.md index 5bcadb0219..55aa143e0d 100644 --- a/aio/content/guide/testing-components-scenarios.md +++ b/aio/content/guide/testing-components-scenarios.md @@ -162,7 +162,7 @@ However, if you run the tests in a **non-CLI environment**, tests of this component may fail. For example, if you run the `BannerComponent` tests in a web coding environment such as [plunker](https://plnkr.co/), you'll see a message like this one: - + Error: This test module uses the component BannerComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. @@ -1452,7 +1452,7 @@ because the CLI compiles the application before running the tests. If you run tests in a **non-CLI environment**, the tests may fail with a message like this one: - + Error: This test module uses the component BannerComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. @@ -1497,7 +1497,7 @@ If you neglect to make the test function async (e.g., forget to use the `async` keyword as described below), you'll see this error message - + Error: ViewDestroyedError: Attempt to use a destroyed view diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md index 3f0b5fc6e4..c6c282dd72 100644 --- a/aio/content/guide/testing.md +++ b/aio/content/guide/testing.md @@ -36,7 +36,7 @@ The Angular CLI downloads and installs everything you need to test an Angular ap The project you create with the CLI is immediately ready to test. Just run the [`ng test`](cli/test) CLI command: - + ng test @@ -45,7 +45,7 @@ and launches the [Karma test runner](https://karma-runner.github.io). The console output looks a bit like this: - + 10% building modules 1/1 modules 0 active ...INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ ...INFO [launcher]: Launching browser Chrome ... @@ -324,7 +324,7 @@ customLaunchers: { Now you can run the following command to use the `--no-sandbox` flag: - + ng test --no-watch --no-progress --browsers=ChromeHeadlessCI diff --git a/aio/content/guide/upgrade-setup.md b/aio/content/guide/upgrade-setup.md index c4154e1212..fcc87ece4f 100644 --- a/aio/content/guide/upgrade-setup.md +++ b/aio/content/guide/upgrade-setup.md @@ -31,8 +31,7 @@ Setting up a new project on your machine is quick and easy with the [QuickStart Perform the _clone-to-launch_ steps with these terminal commands. - - + git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install @@ -60,8 +59,7 @@ Perform the _clone-to-launch_ steps with these terminal commands. Download the QuickStart seed and unzip it into your project folder. Then perform the remaining steps with these terminal commands. - - + cd quickstart npm install npm start @@ -106,7 +104,7 @@ Open a terminal window in the project folder and enter the following commands fo ### OS/X (bash) - + xargs rm -rf < non-essential-files.osx.txt rm src/app/*.spec*.ts rm non-essential-files.osx.txt @@ -117,7 +115,7 @@ Open a terminal window in the project folder and enter the following commands fo ### Windows - + for /f %i in (non-essential-files.txt) do del %i /F /S /Q rd .git /s /q rd e2e /s /q diff --git a/aio/content/tutorial/toh-pt0.md b/aio/content/tutorial/toh-pt0.md index 28c017e74c..61bfccb37e 100644 --- a/aio/content/tutorial/toh-pt0.md +++ b/aio/content/tutorial/toh-pt0.md @@ -29,7 +29,7 @@ To create a new workspace and an initial app project: 1. Ensure that you are not already in an Angular workspace folder. For example, if you have previously created the Getting Started workspace, change to the parent of that folder. 2. Run the CLI command `ng new` and provide the name `angular-tour-of-heroes`, as shown here: - + ng new angular-tour-of-heroes @@ -50,7 +50,7 @@ The initial app project contains a simple Welcome app, ready to run. Go to the workspace directory and launch the application. - + cd angular-tour-of-heroes ng serve --open diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md index 777105a2ba..70ba9e7e8e 100644 --- a/aio/content/tutorial/toh-pt1.md +++ b/aio/content/tutorial/toh-pt1.md @@ -14,7 +14,7 @@ and place that component in the application shell. Using the Angular CLI, generate a new component named `heroes`. - + ng generate component heroes @@ -146,7 +146,7 @@ Notice that the app stopped working when you added `[(ngModel)]`. To see the error, open the browser development tools and look in the console for a message like - + Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md index b94b7f4c14..ec26344771 100644 --- a/aio/content/tutorial/toh-pt2.md +++ b/aio/content/tutorial/toh-pt2.md @@ -153,7 +153,7 @@ After the browser refreshes, the application is broken. Open the browser developer tools and look in the console for an error message like this: - + HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md index 00ccccb0ab..d6f2190d61 100644 --- a/aio/content/tutorial/toh-pt3.md +++ b/aio/content/tutorial/toh-pt3.md @@ -20,7 +20,7 @@ The `HeroDetailComponent` will present details of a selected hero. Use the Angular CLI to generate a new component named `hero-detail`. - + ng generate component hero-detail diff --git a/aio/content/tutorial/toh-pt4.md b/aio/content/tutorial/toh-pt4.md index 35ac0f29ca..349807cd61 100644 --- a/aio/content/tutorial/toh-pt4.md +++ b/aio/content/tutorial/toh-pt4.md @@ -34,7 +34,7 @@ when the user clicks a hero. Using the Angular CLI, create a service called `hero`. - + ng generate service hero @@ -265,7 +265,7 @@ This section guides you through the following: Use the CLI to create the `MessagesComponent`. - + ng generate component messages @@ -284,7 +284,7 @@ You should see the default paragraph from `MessagesComponent` at the bottom of t Use the CLI to create the `MessageService` in `src/app`. - + ng generate service message diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md index 56ba7285bf..8723edd815 100644 --- a/aio/content/tutorial/toh-pt5.md +++ b/aio/content/tutorial/toh-pt5.md @@ -28,7 +28,7 @@ By convention, the module class name is `AppRoutingModule` and it belongs in the Use the CLI to generate it. - + ng generate module app-routing --flat --module=app @@ -120,7 +120,7 @@ because `AppModule` imports `AppRoutingModule` which exported `RouterModule`. Th You should still be running with this CLI command. - + ng serve @@ -174,7 +174,7 @@ So far there's only the heroes view. Add a `DashboardComponent` using the CLI: - + ng generate component dashboard diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md index afc8884019..fda4fe50a1 100644 --- a/aio/content/tutorial/toh-pt6.md +++ b/aio/content/tutorial/toh-pt6.md @@ -50,7 +50,7 @@ If you're coding along with this tutorial, stay here and add the In-memory Web A Install the In-memory Web API package from npm with the following command: - + npm install angular-in-memory-web-api --save @@ -71,7 +71,7 @@ that primes the in-memory database. Generate the class `src/app/in-memory-data.service.ts` with the following command: - + ng generate service InMemoryData @@ -406,7 +406,7 @@ For this to work, the next step is to add a component with a selector that match Create a `HeroSearchComponent` with the CLI. - + ng generate component hero-search diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss index 577b2ccd85..ffc18a6e6b 100644 --- a/aio/src/styles/2-modules/_code.scss +++ b/aio/src/styles/2-modules/_code.scss @@ -41,7 +41,7 @@ code-example { } // TERMINAL / SHELL TEXT STYLES - &.code-shell, &[language=sh], &[language=bash] { + &[language=sh], &[language=bash] { background-color: $darkgray; } @@ -242,7 +242,7 @@ aio-code { /* SHELL / TERMINAL CODE BLOCKS */ code-example { - &.code-shell, &[language=sh], &[language=bash] { + &[language=sh], &[language=bash] { .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec { color: $codegreen; } diff --git a/aio/src/styles/_print.scss b/aio/src/styles/_print.scss index 3a1fc50810..52dcb48d3a 100644 --- a/aio/src/styles/_print.scss +++ b/aio/src/styles/_print.scss @@ -70,7 +70,7 @@ } code-example { - &.code-shell, &[language=sh], &[language=bash] { + &[language=sh], &[language=bash] { background: none; .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {