diff --git a/aio/content/cli/index.md b/aio/content/cli/index.md index 71d04ebec7..8e635ee681 100644 --- a/aio/content/cli/index.md +++ b/aio/content/cli/index.md @@ -7,7 +7,7 @@ The Angular CLI is a command-line interface tool that you use to initialize, dev Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately. Install the CLI using the `npm` package manager: - + npm install -g @angular/cli @@ -20,14 +20,14 @@ Invoke the tool on the command line through the `ng` executable. Online help is available on the command line. Enter the following to list commands or options for a given command (such as [generate](cli/generate)) with a short description. - + ng help ng generate --help To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands: - + ng new my-first-project cd my-first-project ng serve @@ -83,7 +83,7 @@ Command syntax is shown as follows: Option aliases are prefixed with a single dash (-). Arguments are not prefixed. For example: - + ng build my-app -c production diff --git a/aio/content/guide/app-shell.md b/aio/content/guide/app-shell.md index 5a7fb8b93f..77a14a80de 100644 --- a/aio/content/guide/app-shell.md +++ b/aio/content/guide/app-shell.md @@ -10,7 +10,7 @@ Learn more in [The App Shell Model](https://developers.google.com/web/fundamenta ## Step 1: Prepare the application You can do this with the following CLI command: - + ng new my-app --routing @@ -20,7 +20,7 @@ For an existing application, you have to manually add the `RouterModule` and def Use the CLI to automatically create the app shell. - + ng generate app-shell --client-project my-app --universal-project server-app @@ -29,7 +29,7 @@ ng generate app-shell --client-project my-app --universal-project server-app After running this command you will notice that the `angular.json` configuration file has been updated to add two new targets, with a few other changes. - + "server": { "builder": "@angular-devkit/build-angular:server", "options": { @@ -52,7 +52,7 @@ After running this command you will notice that the `angular.json` configuration Use the CLI to build the `app-shell` target. - + ng run my-app:app-shell diff --git a/aio/content/guide/cli-builder.md b/aio/content/guide/cli-builder.md index f7f18e3b3c..f7751667f0 100644 --- a/aio/content/guide/cli-builder.md +++ b/aio/content/guide/cli-builder.md @@ -191,7 +191,7 @@ For our example builder, we expect the `options` value to be a `JsonObject` with We can provide the following schema for type validation of these values. - + { "$schema": "http://json-schema.org/schema", @@ -222,7 +222,7 @@ To link our builder implementation with its schema and name, we need to create a Create a file named `builders.json` file that looks like this. - + { "builders": { @@ -238,7 +238,7 @@ Create a file named `builders.json` file that looks like this. In the `package.json` file, add a `builders` key that tells the Architect tool where to find our builder definition file. - + { "name": "@example/command-runner", @@ -257,7 +257,7 @@ The first part of this is the package name (resolved using node resolution), an Using one of our `options` is very straightforward, we did this in the previous section when we accessed `options.command`. - + context.reportStatus(`Executing "${options.command}"...`); const child = childProcess.spawn(options.command, options.args, { stdio: 'pipe' }); @@ -274,7 +274,7 @@ The Architect tool uses the target definition to resolve input options for a giv The `angular.json` file has a section for each project, and the "architect" section of each project configures targets for builders used by CLI commands such as 'build', 'test', and 'lint'. By default, for example, the `build` command runs the builder `@angular-devkit/build-angular:browser` to perform the build task, and passes in default option values as specified for the `build` target in `angular.json`. - + { "myApp": { ... @@ -361,7 +361,7 @@ npm install @example/command-runner If we create a new project with `ng new builder-test`, the generated `angular.json` file looks something like this, with only default builder configurations. - + { // ... @@ -413,7 +413,7 @@ We need to update the `angular.json` file to add a target for this builder to th * The configurations key is optional, we'll leave it out for now. - + { "projects": { @@ -495,7 +495,7 @@ Use integration testing for your builder, so that you can use the Architect sche Here’s an example of a test that runs the command builder. The test uses the builder to run the `ls` command, then validates that it ran successfully and listed the proper files. - + import { Architect, ArchitectHost } from '@angular-devkit/architect'; import { TestingArchitectHost } from '@angular-devkit/architect/testing'; diff --git a/aio/content/guide/creating-libraries.md b/aio/content/guide/creating-libraries.md index 4e616faff9..4080d8f2ec 100644 --- a/aio/content/guide/creating-libraries.md +++ b/aio/content/guide/creating-libraries.md @@ -12,7 +12,7 @@ A simple example might be a button that sends users to your company website, tha Use the Angular CLI to generate a new library skeleton with the following command: - + ng generate library my-lib @@ -35,7 +35,7 @@ The workspace configuration file, `angular.json`, is updated with a project of t You can build, test, and lint the project with CLI commands: - + ng build my-lib ng test my-lib ng lint my-lib @@ -106,7 +106,7 @@ To learn more, see [Schematics Overview](guide/schematics) and [Schematics for Use the Angular CLI and the npm package manager to build and publish your library as an npm package. Libraries are built in [AoT mode](guide/aot-compiler) by default, so you do not need to specify the `-prod` flag when building for publication. - + ng build my-lib cd dist/my-lib npm publish @@ -158,7 +158,7 @@ You don't have to publish your library to the npm package manager in order to us To use your own library in an app: * Build the library. You cannot use a library before it is built. - + ng build my-lib @@ -190,6 +190,6 @@ Every time a file is changed a partial build is performed that emits the amended Incremental builds can be run as a backround process in your dev environment. To take advantage of this feature add the `--watch` flag to the build command: - + ng build my-lib --watch diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index 9c0231f9fd..973f52bd1f 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -152,7 +152,7 @@ The list is by no means exhaustive, but should provide you with a good starting [rewrite rule](http://httpd.apache.org/docs/current/mod/mod_rewrite.html) to the `.htaccess` file as shown (https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/): - + RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] @@ -207,7 +207,7 @@ and to * [Firebase hosting](https://firebase.google.com/docs/hosting/): add a [rewrite rule](https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites). - + "rewrites": [ { "source": "**", "destination": "/index.html" @@ -436,7 +436,7 @@ When you create a production build using [`ng build --prod`](cli/build), the CLI The `index.html` file is also modified during the build process to include script tags that enable differential loading. See the sample output below from the `index.html` file produced during a build using `ng build`. - + <body> <app-root></app-root> <script src="runtime-es2015.js" type="module"></script> @@ -479,7 +479,7 @@ not IE 9-11 # For IE 9-11 support, remove 'not'. The `tsconfig.json` looks like this: - + { "compileOnSave": false, @@ -550,7 +550,7 @@ To maintain the benefits of differential loading, however, a better option is to To do this for `ng serve`, create a new file, `tsconfig-es5.app.json` next to `tsconfig.app.json` with the following content. - + { "extends": "./tsconfig.app.json", @@ -563,7 +563,7 @@ To do this for `ng serve`, create a new file, `tsconfig-es5.app.json` next to `t In `angular.json` add two new configuration sections under the `build` and `serve` targets to point to the new TypeScript configuration. - + "build": { "builder": "@angular-devkit/build-angular:browser", @@ -610,7 +610,7 @@ ng serve --configuration es5 Create a new file, `tsconfig-es5.spec.json` next to `tsconfig.spec.json` with the following content. - + { "extends": "./tsconfig.spec.json", @@ -621,7 +621,7 @@ Create a new file, `tsconfig-es5.spec.json` next to `tsconfig.spec.json` with th - + "test": { "builder": "@angular-devkit/build-angular:karma", @@ -649,7 +649,7 @@ ng test --configuration es5 Create an [ES5 serve configuration](guide/deployment#configuring-serve-for-es5) as explained above, and configuration an ES5 configuration for the E2E target. - + "test": { "builder": "@angular-devkit/build-angular:protractor", diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index dc50a999f0..9fd5741f8c 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -748,7 +748,7 @@ For more information, see [Schematics](guide/schematics) and [Integrating Librar Schematics come with their own command-line tool. Using Node 6.9 or above, install the Schematics CLI globally: - + npm install -g @angular-devkit/schematics-cli diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md index 0d2ce89b80..f3bd752be0 100644 --- a/aio/content/guide/testing.md +++ b/aio/content/guide/testing.md @@ -2581,7 +2581,7 @@ Focus on the `overrideComponent` method. It takes two arguments: the component type to override (`HeroDetailComponent`) and an override metadata object. The [override metadata object](#metadata-override-object) is a generic defined as follows: - + type MetadataOverride<T> = { add?: Partial<T>; remove?: Partial<T>; @@ -2594,7 +2594,7 @@ This example resets the component's `providers` metadata. The type parameter, `T`, is the kind of metadata you'd pass to the `@Component` decorator: - + selector?: string; template?: string; templateUrl?: string; @@ -2924,7 +2924,7 @@ to get the basics before trying to absorb the full API. The module definition passed to `configureTestingModule` is a subset of the `@NgModule` metadata properties. - + type TestModuleMetadata = { providers?: any[]; declarations?: any[]; @@ -2939,7 +2939,7 @@ Each override method takes a `MetadataOverride` where `T` is the kind of meta appropriate to the method, that is, the parameter of an `@NgModule`, `@Component`, `@Directive`, or `@Pipe`. - + type MetadataOverride<T> = { add?: Partial<T>; remove?: Partial<T>; diff --git a/aio/content/guide/typescript-configuration.md b/aio/content/guide/typescript-configuration.md index c877cd9263..d56ed01ca5 100644 --- a/aio/content/guide/typescript-configuration.md +++ b/aio/content/guide/typescript-configuration.md @@ -59,7 +59,7 @@ When the `noImplicitAny` flag is `true`, you may get *implicit index errors* as Most developers feel that *this particular error* is more annoying than helpful. You can suppress them with the following additional flag: - + "suppressImplicitAnyIndexErrors": true diff --git a/aio/content/guide/universal.md b/aio/content/guide/universal.md index aeef5fa366..51fd65cdf1 100644 --- a/aio/content/guide/universal.md +++ b/aio/content/guide/universal.md @@ -31,7 +31,7 @@ A Node Express web server compiles HTML pages with Universal based on client req To create the server-side app module, `app.server.module.ts`, run the following CLI command. - + ng add @nguniversal/express-engine --clientProject angular.io-example @@ -39,7 +39,7 @@ ng add @nguniversal/express-engine --clientProject angular.io-example The command creates the following folder structure. - + src/ index.html app web page main.ts bootstrapper for client app @@ -62,7 +62,7 @@ The files marked with `*` are new and not in the original tutorial sample. To start rendering your app with Universal on your local system, use the following command. - + npm run build:ssr && npm run serve:ssr @@ -205,7 +205,7 @@ the work is already done. We'll assume this is the case, but it's trivial to pro Start by creating an [HttpInterceptor](api/common/http/HttpInterceptor): - + import {Injectable, Inject, Optional} from '@angular/core'; import {HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders} from '@angular/common/http'; @@ -235,7 +235,7 @@ export class UniversalInterceptor implements HttpInterceptor { Next, provide the interceptor in the providers for the server `AppModule` (app.server.module.ts): - + import {HTTP_INTERCEPTORS} from '@angular/common/http'; import {UniversalInterceptor} from './universal-interceptor'; diff --git a/aio/content/guide/using-libraries.md b/aio/content/guide/using-libraries.md index dcf8098fab..ffd9038e7a 100644 --- a/aio/content/guide/using-libraries.md +++ b/aio/content/guide/using-libraries.md @@ -19,7 +19,7 @@ Library packages often include typings in `.d.ts` files; see examples in `node_m For example, suppose you have a library named `d3`: - + npm install d3 --save npm install @types/d3 --save-dev @@ -72,7 +72,7 @@ Configure the CLI to do this at build time using the "scripts" and "styles" opti For example, to use the [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) library, first install the library and its dependencies using the npm package manager: - + npm install jquery --save npm install popper.js --save npm install bootstrap --save diff --git a/aio/content/guide/workspace-config.md b/aio/content/guide/workspace-config.md index 3327033db1..2f4eef9c51 100644 --- a/aio/content/guide/workspace-config.md +++ b/aio/content/guide/workspace-config.md @@ -17,7 +17,7 @@ The following properties, at the top level of the file, configure the workspace. The initial app that you create with `ng new app_name` is listed under "projects": - + "projects": { "app_name": { @@ -45,7 +45,7 @@ When you create a library project with `ng generate library`, the library projec The following top-level configuration properties are available for each project, under `projects:`. - + "my-app": { "root": "", @@ -118,7 +118,7 @@ Each target object specifies the `builder` for that target, which is the npm pac In addition, each target has an `options` section that configures default options for the target, and a `configurations` section that names and specifies alternative configurations for the target. See the example in [Build target](#build-target) below. - + "architect": { "build": { }, @@ -206,7 +206,7 @@ The following sections provide more details of how these complex values are used Each `build` target configuration can include an `assets` array that lists files or folders you want to copy as-is when building your project. By default, the `src/assets/` folder and `src/favicon.ico` are copied over. - + "assets": [ "src/assets", @@ -227,7 +227,7 @@ A asset specification object can have the following fields. For example, the default asset paths can be represented in more detail using the following objects. - + "assets": [ { "glob": "**/*", "input": "src/assets/", "output": "/assets/" }, @@ -239,7 +239,7 @@ For example, the default asset paths can be represented in more detail using the You can use this extended configuration to copy assets from outside your project. For example, the following configuration copies assets from a node package: - + "assets": [ { "glob": "**/*", "input": "./node_modules/some-package/images", "output": "/some-package/" }, @@ -251,7 +251,7 @@ The contents of `node_modules/some-package/images/` will be available in `dist/s The following example uses the `ignore` field to exclude certain files in the assets folder from being copied into the build: - + "assets": [ { "glob": "**/*", "input": "src/assets/", "ignore": ["**/*.svg"], "output": "/assets/" }, @@ -270,7 +270,7 @@ With a configuration object, you have the option of naming the bundle for the en 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: - + "styles": [ { "input": "src/external-module/styles.scss", "inject": false, "bundleName": "external-module" } @@ -283,7 +283,7 @@ For example, the following object values create and name a bundle that contains You can mix simple and complex file references for styles and scripts. - + "styles": [ "src/styles.css", @@ -302,7 +302,7 @@ In Sass and Stylus you can make use of the `includePaths` functionality for both To add paths, use the `stylePreprocessorOptions` option: - + "stylePreprocessorOptions": { "includePaths": [ @@ -335,7 +335,7 @@ You can supply an object as a configuration value for either of these to provide * The flag `--optimization="true"` applies to both scripts and styles. You can supply a value such as the following to apply optimization to one or the other: - + "optimization": { "scripts": true, "styles": false } @@ -346,7 +346,7 @@ You can configure the option to apply to one or the other. You can also choose to output hidden source maps, or resolve vendor package source maps. For example: - + "sourceMaps": { "scripts": true, "styles": false, "hidden": true, "vendor": true }