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:
parent
1bcd58cee8
commit
a86850e3f2
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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
|
|||
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.
|
||||
|
||||
<code-example format="." language="typescript">
|
||||
<code-example language="typescript">
|
||||
|
||||
import { Architect, ArchitectHost } from '@angular-devkit/architect';
|
||||
import { TestingArchitectHost } from '@angular-devkit/architect/testing';
|
||||
|
|
|
@ -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 [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.
|
||||
|
||||
<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>
|
||||
|
|
|
@ -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
|
||||
# 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">
|
||||
<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:
|
||||
|
||||
<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",
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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<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:
|
||||
|
||||
<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<T> = {
|
||||
add?: Partial<T>;
|
||||
remove?: Partial<T>;
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 }
|
||||
|
||||
|
|
Loading…
Reference in New Issue