docs: update examples for tree-shakeable providers (#22961)

PR Close #22961

aio/content/examples/styleguide/src/07-03/app/app.component.ts

@@ -8,6 +8,5 @@ import { HeroService } from './heroes';
   template: `
       <toh-heroes></toh-heroes>
     `,
-  providers: [HeroService]
 })
 export class AppComponent {}

aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts

@@ -5,7 +5,9 @@ import { Observable, of } from 'rxjs';
 
 import { Hero } from './hero.model';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class HeroService {
   getHeroes() {
     let heroes: Hero[] = [];