docs(@angular/cli): update hmr documentation

Update documentation for the hmr story to show proper
configurations in angular.json and src/tsconfig.app.json.

Closes angular#11028, angular#10668, angular#10663

Author: bniedermeyer

docs/documentation/stories/configure-hmr.md

@@ -15,40 +15,39 @@ Next we need to update the bootstrap process of our app to enable the
 Create a file called `src/environments/environment.hmr.ts` with the following contents:
 
 ```typescript
-
 export const environment = {
- production: false,
- hmr: true
+  production: false,
+  hmr: true
 };
 ```
 
 Update `src/environments/environment.prod.ts` and add the `hmr: false` flag to the environment:
 
 ```typescript
 export const environment = {
- production: true,
- hmr: false
+  production: true,
+  hmr: false
 };
 ```
 
 Update `src/environments/environment.ts` and add the `hmr: false` flag to the environment:
 
 ```typescript
 export const environment = {
- production: false,
- hmr: false
+  production: false,
+  hmr: false
 };
 ```
 
-
-Update `angular.json` to include an hmr environment as explained [here](./application-environments) and add a configuration within serve to enable hmr.
+Update `angular.json` to include an hmr environment as explained [here](./application-environments)
+and add configurations within build and serve to enable hmr. Note that `<project-name>` here
+represents the name of the project you are adding this configuration to in `angular.json`.
 
 ```json
-  "serve": {
-    "configuration": {
+  "build": {
+    "configurations": {
       ...
       "hmr": {
-        "hmr": true,
         "fileReplacements": [
           {
             "replace": "src/environments/environment.ts",
@@ -57,16 +56,37 @@ Update `angular.json` to include an hmr environment as explained [here](./applic
         ],
       }
     }
+  },
+  ...
+  "serve": {
+    "configurations": {
+      ...
+      "hmr": {
+        "hmr": true,
+        "browserTarget": "<project-name>:build:hmr"
+      }
+    }
   }
 ```
 
+Add the necessary types to `src/tsconfig.app.json`
+
+````json
+{
+  ...
+  "compilerOptions": {
+    ...
+    "types": ["node"]
+  },
+}
+
 Run `ng serve` with the flag `--configuration hmr` to enable hmr and select the new environment:
 
 ```bash
 ng serve --configuration hmr
-```
+````
 
-Create a shortcut for this by updating  `package.json` and adding an entry to the script object:
+Create a shortcut for this by updating `package.json` and adding an entry to the script object:
 
 ```json
 "scripts": {
@@ -75,40 +95,39 @@ Create a shortcut for this by updating  `package.json` and adding an entry to th
 }
 ```
 
-
 ### Add dependency for @angularclass/hmr and configure app
 
 In order to get HMR working we need to install the dependency and configure our app to use it.
 
-
 Install the `@angularclass/hmr` module as a dev-dependency
 
 ```bash
 $ npm install --save-dev @angularclass/hmr
 ```
 
-
 Create a file called `src/hmr.ts` with the following content:
 
 ```typescript
 import { NgModuleRef, ApplicationRef } from '@angular/core';
 import { createNewHosts } from '@angularclass/hmr';
 
-export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
+export const hmrBootstrap = (
+  module: any,
+  bootstrap: () => Promise<NgModuleRef<any>>
+) => {
   let ngModule: NgModuleRef<any>;
   module.hot.accept();
-  bootstrap().then(mod => ngModule = mod);
+  bootstrap().then((mod) => (ngModule = mod));
   module.hot.dispose(() => {
     const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
-    const elements = appRef.components.map(c => c.location.nativeElement);
+    const elements = appRef.components.map((c) => c.location.nativeElement);
     const makeVisible = createNewHosts(elements);
     ngModule.destroy();
     makeVisible();
   });
 };
 ```
 
-
 Update `src/main.ts` to use the file we just created:
 
 ```typescript
@@ -127,7 +146,7 @@ if (environment.production) {
 const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
 
 if (environment.hmr) {
-  if (module[ 'hot' ]) {
+  if (module['hot']) {
     hmrBootstrap(module, bootstrap);
   } else {
     console.error('HMR is not enabled for webpack-dev-server!');
@@ -138,7 +157,6 @@ if (environment.hmr) {
 }
 ```
 
-
 ### Starting the development environment with HMR enabled
 
 Now that everything is set up we can run the new configuration:
@@ -149,10 +167,6 @@ $ npm run hmr
 
 When starting the server Webpack will tell you that it’s enabled:
 
-
     NOTICE Hot Module Replacement (HMR) is enabled for the dev server.
 
-
 Now if you make changes to one of your components they changes should be visible automatically without a complete browser refresh.
-
-