From a06000ea01e62bd93897628669f059e268594aa8 Mon Sep 17 00:00:00 2001
From: Daniel Wiehl <daniel.wiehl@yahoo.com>
Date: Tue, 7 Aug 2018 17:13:10 +0200
Subject: [PATCH] docs: simplify documentation of how to integrate and interact
 with lazy loaded modules

---
 resources/site/how-to.md | 83 +++++++++++++++++++++++-----------------
 1 file changed, 47 insertions(+), 36 deletions(-)

diff --git a/resources/site/how-to.md b/resources/site/how-to.md
index efdceafa9..930c46bf8 100644
--- a/resources/site/how-to.md
+++ b/resources/site/how-to.md
@@ -330,7 +330,25 @@ ng generate component feature/view1
 ng generate component feature/view2
 ```
 
-### 2. In `FeatureRoutingModule`, add the routes to the activity component and the two view components
+### 2. In `FeatureModule`, manifest a dependency to the workbench
+```javascript
+@NgModule({
+  imports: [
+    CommonModule,
+    FeatureRoutingModule,
+    WorkbenchModule.forChild(),
+  ],
+  declarations: [
+    ActivityComponent, 
+    View1Component,
+    View2Component
+  ]
+})
+export class FeatureModule {
+}
+```
+
+### 3. In `FeatureRoutingModule`, add the routes to the activity component and the two view components
 
 ```javascript
 const routes: Routes = [
@@ -355,7 +373,7 @@ const routes: Routes = [
 export class FeatureRoutingModule {
 }
 ```
-### 3. In `AppRoutingModule`, update the routes array to point to the feature module
+### 4. In `AppRoutingModule`, update the routes array to point to the feature module
 
 ```javascript
 const routes: Routes = [
@@ -374,46 +392,39 @@ export class AppRoutingModule {
 ```
 Notice that the lazy loading syntax uses loadChildren followed by a string that is the relative path to the module, a hash mark or #, and the module’s class name. It is important to pass a string instead of a symbol to not load the module eagerly.
 
-### 4. In `app.component.html`, add an activity to open the activity of the feature module
+### 5. Open activities or views of the feature module
+
+In `app.component.html`, add an activity to open the activity of the feature module. Because the activity is registered on an empty path, the router link corresponds to the path to the feature module.
+
 ```html
 <wb-workbench>
   <wb-activity title="Activity of feature module"
-                label="star_outline"
-                cssClass="material-icons"
-                routerLink="feature">
+               label="star_outline"
+               cssClass="material-icons"
+               routerLink="feature">
   </wb-activity>
 </wb-workbench>
 ```
-### 5. To open the views of the feature module, either model them as activities with target `view`, or create an activity component in `AppModule` and use `wbRouterLink`
-  
-  * Option 1: Open views of the feature module via activity buttons:
- 
-    ```html
-    <wb-workbench>
-      <wb-activity title="View 1 of feature module"
-                   label="view_module"
-                   cssClass="material-icons"
-                   routerLink="feature/view-1"
-                   target="view">
-      </wb-activity>
-      <wb-activity title="View 2 of feature module"
-                   label="dashboard"
-                   cssClass="material-icons"
-                   routerLink="feature/view-2"
-                   target="view">
-      </wb-activity>
-    </wb-workbench>
-    ```
-  * Option 2: Open views of the feature module via workbench router link:
-    
-    If not having an activity in your app module yet, create an activity component using Angular CLI, register a route to that component and add the activity as content child to `<wb-workbench>...</wb-workbench>`.
-    
-    Then, add the following links to the template of the activity component to open the views of the feature module:
-
-    ```html
-    <a wbRouterLink="/feature/view-1">Open View 1</a>
-    <a wbRouterLink="/feature/view-2">Open View 2</a>
-    ```
+
+To open a view from the app module, use router link as following:
+
+```html
+<a wbRouterLink="/feature/view-1">Open view 1 of feature module</a>
+<a wbRouterLink="/feature/view-2">Open view 2 of feature module</a>
+```
+
+To open a view from within the activity of the feature module, use its relative path instead:
+
+```html
+<a wbRouterLink="view-1">Open view 1</a>
+<a wbRouterLink="view-2">Open view 2</a>
+```
+
+To open another view from within a view of the feature module, go back one level first, and then use its relative path:
+
+```html
+<a wbRouterLink="../view-2">Open view 2</a>
+```
 
 [menu-overview]: /README.md
 [menu-demo]: https://blog.sbb.technology/scion-workbench-demo/#/(view.6:heatmap//view.5:person/79//view.4:person/39//view.3:person/15//view.2:person/38//view.1:person/66//activity:person-list)?viewgrid=eyJpZCI6MSwic2FzaDEiOlsidmlld3BhcnQuMSIsInZpZXcuMSIsInZpZXcuMiIsInZpZXcuMSJdLCJzYXNoMiI6eyJpZCI6Miwic2FzaDEiOlsidmlld3BhcnQuMiIsInZpZXcuMyIsInZpZXcuMyJdLCJzYXNoMiI6eyJpZCI6Mywic2FzaDEiOlsidmlld3BhcnQuNCIsInZpZXcuNiIsInZpZXcuNiJdLCJzYXNoMiI6WyJ2aWV3cGFydC4zIiwidmlldy40Iiwidmlldy40Iiwidmlldy41Il0sInNwbGl0dGVyIjowLjQ4NTk2MTEyMzExMDE1MTEsImhzcGxpdCI6ZmFsc2V9LCJzcGxpdHRlciI6MC41NTk0MjQzMjY4MzM3OTc1LCJoc3BsaXQiOnRydWV9LCJzcGxpdHRlciI6MC4zMjI2Mjc3MzcyMjYyNzczLCJoc3BsaXQiOmZhbHNlfQ%3D%3D