refactor(docs-infra): remove obsolete `format` attribute from code examples (#31674)

The `format` attribute is an artifact of an old version of the docs
tooling (before moving it into the angular/angular repo) and no longer
does anything. People are still copy-pasting it from existing examples.

This commit removes all occurrences of the `format` attribute on code
examples.

PR Close #31674
This commit is contained in:
George Kalpakas 2019-07-20 23:02:36 +03:00 committed by Miško Hevery
parent 1bcd58cee8
commit a86850e3f2
11 changed files with 55 additions and 55 deletions

View File

@ -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:
<code-example format="." language="bash">
<code-example language="bash">
npm install -g @angular/cli
</code-example>
@ -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.
<code-example format="." language="bash">
<code-example language="bash">
ng help
ng generate --help
</code-example>
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:
<code-example format="." language="bash">
<code-example language="bash">
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:
<code-example format="." language="bash">
<code-example language="bash">
ng build my-app -c production
</code-example>

View File

@ -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:
<code-example format="." language="bash">
<code-example language="bash">
ng new my-app --routing
</code-example>
@ -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.
<code-example format="." language="bash">
<code-example language="bash">
ng generate app-shell --client-project my-app --universal-project server-app
</code-example>
@ -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.
<code-example format="." language="json">
<code-example language="json">
"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.
<code-example format="." language="bash">
<code-example language="bash">
ng run my-app:app-shell
</code-example>

View File

@ -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.
<code-example format="." language="json">
<code-example language="json">
{
"$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.
<code-example format="." language="json">
<code-example language="json">
{
"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.
<code-example format="." language="json">
<code-example language="json">
{
"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`.
<code-example format="." language="typescript">
<code-example language="typescript">
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`.
<code-example format="." language="json">
<code-example language="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.
<code-example format="." language="json">
<code-example language="json">
{
// ...
@ -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.
<code-example format="." language="json">
<code-example language="json">
{
"projects": {
@ -495,7 +495,7 @@ Use integration testing for your builder, so that you can use the Architect sche
Heres 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.
<code-example format="." language="typescript">
<code-example language="typescript">
import { Architect, ArchitectHost } from '@angular-devkit/architect';
import { TestingArchitectHost } from '@angular-devkit/architect/testing';

View File

@ -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:
<code-example format="." language="bash">
<code-example language="bash">
ng generate library my-lib
</code-example>
@ -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:
<code-example format="." language="bash">
<code-example language="bash">
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 [Schematicsfor
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.
<code-example format="." language="bash">
<code-example language="bash">
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.
<code-example format="." language="bash">
<code-example language="bash">
ng build my-lib
</code-example>
@ -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:
<code-example format="." language="bash">
<code-example language="bash">
ng build my-lib --watch
</code-example>

View File

@ -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/):
<code-example format=".">
<code-example>
RewriteEngine On
&#35 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).
<code-example format="." language="json">
<code-example language="json">
"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`.
<code-example language="html" format=".">
<code-example language="html">
&lt;body>
&lt;app-root>&lt;/app-root>
&lt;script src="runtime-es2015.js" type="module">&lt;/script>
@ -479,7 +479,7 @@ not IE 9-11 # For IE 9-11 support, remove 'not'.
The `tsconfig.json` looks like this:
<code-example language="json" format=".">
<code-example language="json">
{
"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.
<code-example language="json" format=".">
<code-example language="json">
{
"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.
<code-example language="json" format=".">
<code-example language="json">
"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.
<code-example language="json" format=".">
<code-example language="json">
{
"extends": "./tsconfig.spec.json",
@ -621,7 +621,7 @@ Create a new file, `tsconfig-es5.spec.json` next to `tsconfig.spec.json` with th
</code-example>
<code-example language="json" format=".">
<code-example language="json">
"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.
<code-example language="json" format=".">
<code-example language="json">
"test": {
"builder": "@angular-devkit/build-angular:protractor",

View File

@ -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:
<code-example format="." language="bash">
<code-example language="bash">
npm install -g @angular-devkit/schematics-cli
</code-example>

View File

@ -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:
<code-example format="." language="javascript">
<code-example language="javascript">
type MetadataOverride&lt;T&gt; = {
add?: Partial&lt;T&gt;;
remove?: Partial&lt;T&gt;;
@ -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:
<code-example format="." language="javascript">
<code-example language="javascript">
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.
<code-example format="." language="javascript">
<code-example language="javascript">
type TestModuleMetadata = {
providers?: any[];
declarations?: any[];
@ -2939,7 +2939,7 @@ Each override method takes a `MetadataOverride<T>` where `T` is the kind of meta
appropriate to the method, that is, the parameter of an `@NgModule`,
`@Component`, `@Directive`, or `@Pipe`.
<code-example format="." language="javascript">
<code-example language="javascript">
type MetadataOverride&lt;T&gt; = {
add?: Partial&lt;T&gt;;
remove?: Partial&lt;T&gt;;

View File

@ -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:
<code-example format=".">
<code-example>
"suppressImplicitAnyIndexErrors": true

View File

@ -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.
<code-example format="." language="bash">
<code-example language="bash">
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.
<code-example format="." language="none">
<code-example language="none">
src/
index.html <i>app web page</i>
main.ts <i>bootstrapper for client app</i>
@ -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.
<code-example format="." language="bash">
<code-example language="bash">
npm run build:ssr && npm run serve:ssr
</code-example>
@ -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):
<code-example format="." language="typescript">
<code-example language="typescript">
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):
<code-example format="." language="typescript">
<code-example language="typescript">
import {HTTP_INTERCEPTORS} from '@angular/common/http';
import {UniversalInterceptor} from './universal-interceptor';

View File

@ -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`:
<code-example format="." language="bash">
<code-example language="bash">
npm install d3 --save
npm install @types/d3 --save-dev
</code-example>
@ -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:
<code-example format="." language="bash">
<code-example language="bash">
npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

View File

@ -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":
<code-example format="." language="json">
<code-example language="json">
"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:<project_name>`.
<code-example format="." language="json">
<code-example language="json">
"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.
<code-example format="." language="json">
<code-example language="json">
"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.
<code-example format="." language="json">
<code-example language="json">
"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.
<code-example format="." language="json">
<code-example language="json">
"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:
<code-example format="." language="json">
<code-example language="json">
"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:
<code-example format="." language="json">
<code-example language="json">
"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:
<code-example format="." language="json">
<code-example language="json">
"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.
<code-example format="." language="json">
<code-example language="json">
"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:
<code-example format="." language="json">
<code-example language="json">
"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:
<code-example format="." language="json">
<code-example language="json">
"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:
<code-example format="." language="json">
<code-example language="json">
"sourceMaps": { "scripts": true, "styles": false, "hidden": true, "vendor": true }