Lab 10: Compodoc

📖 Resources

• Compodoc Official Documentation
• JSDoc Comments

🚀 Starter Code

step-5-album-wholesale-v16-post-add-custom-async-validator

Continue from your Lab 09 result. If you need a fresh copy, use step-5-album-wholesale-v16-post-add-custom-async-validator as your base and complete Labs 05–09 first.

In this lab, you’ll generate comprehensive project documentation using Compodoc. You’ll install the tool, add JSDoc comments to your code, configure npm scripts, and serve interactive documentation for your Angular application.

📝 Instructions

Step 1: Install Compodoc

npm install --save-dev @compodoc/compodoc

Step 2: Add JSDoc Comments

Add documentation to your code:

/**
 * Service for managing album data
 */
@Injectable({ providedIn: 'root' })
export class AlbumService {
  /**
   * Retrieves all albums
   * @returns Observable of albums
   */
  getAlbums(): Observable<Album[]> {
    return this.http.get<Album[]>(this.apiUrl);
  }
}

Step 3: Add npm Script

In package.json:

{
  "scripts": {
    "compodoc:serve": "compodoc -p tsconfig.json -s"
  }
}

Step 4: Generate Documentation

npm run compodoc:serve

This opens documentation at http://localhost:8080