Skip to content

Latest commit

 

History

History
147 lines (106 loc) · 4.31 KB

LAB.md

File metadata and controls

147 lines (106 loc) · 4.31 KB
Raw

💻 Lab 6 - Generate a route lib

⏰ Estimated time: 15-25 minutes

We'll look at more advanced usages of the @nrwl/angular generators and generate a new route lib for our store application. We'll see how Nx takes care of most of the work, and we just have to do the wiring up!

📚 Learning outcomes:

  • Get familiar with more advanced usages of Nx generators to create an Angular route lib


📲 After this workshop, you should have:

App Screenshot screenshot of lab6 result
File structure lab6 file structure

🏋️‍♀️ Steps:

  1. Stop nx serve

  2. Use the @nrwl/angular:lib generator to generate a new routing library called feature-game-detail that:

    • lives under libs/store
    • has lazy loading
    • has routing enabled
    • its parent routing module is apps/store/src/app/app.module.ts

    ⚠️ Use --help with the above generator to figure out which options you need to use to enable all the above (See the solution if still unsure)

  3. Generate a new Angular component called game-detail under the above lib you created

  4. Change the routing path in apps/store/src/app/app.module.ts to pick up the game ID from the URL

    🐳 Hint 
    {
path: 'game/:id', // <---- HERE
loadChildren: () =>
    import('@bg-hoard/store/feature-game-detail').then(/* ... */)
}

  5. Uncomment line 10 in libs/store/feature-game-detail/src/lib/store-feature-game-detail.module.ts and make sure it's pointing to the game-detail component you generated above

    🐳 Hint 
    RouterModule.forChild([
  { path: '', pathMatch: 'full', component: GameDetailComponent }
]);

  6. Import MatCardModule in store-feature-game-detail.module.ts and add it to the module's imports: [...]:

    🐳 Hint 
    import { MatCardModule } from '@angular/material/card';

  7. Populate your new component with the provided files: game-detail.component.ts / css / html

  8. We now need to display your new routed component. Let's add a <router-outlet> below our list of cards:

    🐳 Hint

    apps/store/src/app/app.component.html:

    <div class="container">
    <div class="games-layout">
        <mat-card class="game-card" *ngFor="let game of games">
        ...
        </mat-card>
    </div>
    <router-outlet></router-outlet> <--- ADD IT HERE
</div>

  9. Make clicking on each card route to the feature-game-detail module with the game's ID:

    🐳 Hint 
    <div class="container">
    <div class="games-layout">
        <mat-card class="game-card"
                *ngFor="let game of games"
                [routerLink]="['/game', game.id]"> <--- HERE
        ...
        </mat-card>
    </div>
    <router-outlet></router-outlet>
</div>

  10. Serve your app again, click on some games, and compare with the screenshot above

  11. Launch the dependency graph and see what's been added

  12. Inspect what changed from the last time you committed, then commit your changes

The result is still pretty simple though. Our route just displays the ID of the selected game in a card. It would be great if we had some API to get the full game from that ID!

🎓If you get stuck, check out the solution

➡️ Next lab ➡️