💻 Lab 2 - Generate an Angular app

⏰ Estimated time: 15-20 minutes

In this lab we'll generate our first Angular application within the new monorepo.

📚 Learning outcomes:

• Get familiar with generating new apps within your workspace using the Nx CLI
  
  
  

📲 After this workshop, your app should look similar to this:

App Screenshot

File structure

🏋️‍♀️ Steps:

1. Make sure you can run Nx commands:
   • try out nx --version and see if it outputs a version number
   • install the CLI globally: npm i -g nx
   • if you don't want to install it globally, use npx nx instead of nx in all the commands below

Please make sure you are using the latest version of Nx (14.5+)

2. Run nx list to see which plugins you have installed and which are available
   
   

3. Add the Angular plugin: @nx/angular
   
   

4. Let's also add Angular Material so we can use some of their components: @angular/material @angular/cdk
   
   

5. Use the @nx/angular plugin to generate an Angular app called store in your new workspace

   ⚠️Important: Make sure you enable routing when asked!

   🐳 Hint

   
   
   

6. Create a new index.ts file in the folder apps/store/src/fake-api in your app, it returns an array of some games (you can copy the code from here)

   ⏳Reminder: When you are given example files to copy, the folder they're in hints to the folder and filename you can place them in when you do the copying.
   
   

7. Add some basic styling to your new component and display the games from the Fake API (to not spend too much time on this, you can copy it from here .html / .css / .ts - and replace the full contents of the files)

   • You can get the example game images from here
     ⚠️ Make sure you put them in the correct folder
     
     

8. Add the Material Card Module to app.module.ts:

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

   Don't forget to add it to the imports section as well.
   
   

9. Serve the app: nx serve store
   
   

10. See your app live at http://localhost:4200/

⚠️ In a company context you might need to define a hostname nx serve store --host=my.host.name

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

---

Now we're starting to see some content! But there are some styles missing: the Angular Material theme! We'll look at how to add it in the next workshop!

The ratings also don't look that good - we'll fix those in Lab 5.

---

🎓If you get stuck, check out the solution

---

➡️ Next lab ➡️