From d74d1306e2b572f4a0470f3e2868012e3375d256 Mon Sep 17 00:00:00 2001
From: Andrew Kushnir <akushnir@google.com>
Date: Tue, 25 May 2021 18:25:37 -0700
Subject: [PATCH] docs: improve preloading component data chapter (#42340)

This commit updates the `Lazy-loading feature modules` guide (guide/lazy-loading-ngmodules) to fix example code that illustrates the process of preloading component data.

Closes #37113.

PR Close #42340
---
 aio/content/guide/lazy-loading-ngmodules.md | 52 ++++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md
index f85990b22f..0a926ef6c6 100644
--- a/aio/content/guide/lazy-loading-ngmodules.md
+++ b/aio/content/guide/lazy-loading-ngmodules.md
@@ -271,7 +271,7 @@ With the CLI, the command to generate a service is as follows:
   ng generate service <service-name>
 </code-example>
 
-In your service, import the following router members, implement `Resolve`, and inject the `Router` service:
+In the newly-created service, implement the `Resolve` interface provided by the `@angular/router` package:
 
 <code-example header="Resolver service (excerpt)">
 
@@ -279,8 +279,14 @@ import { Resolve } from '@angular/router';
 
 ...
 
-export class CrisisDetailResolverService implements Resolve<> {
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<> {
+/* An interface that represents your data model */
+export interface Crisis {
+  id: number;
+  name: string;
+}
+
+export class CrisisDetailResolverService implements Resolve<Crisis> {
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
     // your logic goes here
   }
 }
@@ -291,7 +297,7 @@ Import this resolver into your module's routing module.
 
 <code-example header="Feature module's routing module (excerpt)">
 
-import { YourResolverService }    from './your-resolver.service';
+import { CrisisDetailResolverService } from './crisis-detail-resolver.service';
 
 </code-example>
 
@@ -302,22 +308,44 @@ Add a `resolve` object to the component's `route` configuration.
   path: '/your-path',
   component: YourComponent,
   resolve: {
-    crisis: YourResolverService
+    crisis: CrisisDetailResolverService
   }
 }
 </code-example>
 
 
-In the component, use an `Observable` to get the data from the `ActivatedRoute`.
+In the component's constructor, inject an instance of the `ActivatedRoute` class that represents the current route.
 
+<code-example header="Component's constructor (excerpt)">
 
-<code-example header="Component (excerpt)">
-ngOnInit() {
-  this.route.data
-    .subscribe((your-parameters) => {
-      // your data-specific code goes here
-    });
+import { ActivatedRoute } from '@angular/router';
+
+@Component({ ... })
+class YourComponent {
+  constructor(private route: ActivatedRoute) {}
 }
+
+</code-example>
+
+Use the injected instance of the `ActivatedRoute` class to access `data` associated with a given route.
+
+<code-example header="Component's ngOnInit lifecycle hook (excerpt)">
+
+import { ActivatedRoute } from '@angular/router';
+
+@Component({ ... })
+class YourComponent {
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.route.data
+      .subscribe(data => {
+        const crisis: Crisis = data.crisis;
+        // ...
+      });
+  }
+}
+
 </code-example>
 
 For more information with a working example, see the [routing tutorial section on preloading](guide/router-tutorial-toh#preloading-background-loading-of-feature-areas).