docs: change examples within services to be tree-shakeable (#23070)

PR Close #23070

aio/content/examples/toh-pt4/src/app/app.module.ts

@@ -5,8 +5,6 @@ import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
 import { HeroDetailComponent } from './hero-detail/hero-detail.component';
-import { HeroService } from './hero.service';
-import { MessageService } from './message.service';
 import { MessagesComponent } from './messages/messages.component';
 
 @NgModule({
@@ -23,9 +21,8 @@ import { MessagesComponent } from './messages/messages.component';
   // #docregion providers
   // #docregion providers-heroservice
   providers: [
-    HeroService,
     // #enddocregion providers-heroservice
-    MessageService
+    // no need to place any providers due to the `providedIn` flag...
     // #docregion providers-heroservice
   ],
   // #enddocregion providers-heroservice

aio/content/examples/toh-pt4/src/app/hero.service.1.ts

@@ -8,7 +8,7 @@ import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
 
 // #docregion new
-@Injectable()
+@Injectable({providedIn: 'root'})
 export class HeroService {
 
   constructor() { }

aio/content/examples/toh-pt4/src/app/hero.service.ts

@@ -14,7 +14,7 @@ import { HEROES } from './mock-heroes';
 import { MessageService } from './message.service';
 // #enddocregion import-message-service
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class HeroService {
 
   // #docregion ctor

aio/content/examples/toh-pt4/src/app/message.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class MessageService {
   messages: string[] = [];
 

aio/content/examples/toh-pt5/src/app/app.module.ts

@@ -7,8 +7,6 @@ import { AppComponent }         from './app.component';
 import { DashboardComponent }   from './dashboard/dashboard.component';
 import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
 import { HeroesComponent }      from './heroes/heroes.component';
-import { HeroService }          from './hero.service';
-import { MessageService }       from './message.service';
 import { MessagesComponent }    from './messages/messages.component';
 
 // #docregion routing-module
@@ -30,7 +28,6 @@ import { AppRoutingModule }     from './app-routing.module';
     MessagesComponent
   ],
   // #enddocregion dashboard
-  providers: [ HeroService, MessageService ],
   bootstrap: [ AppComponent ]
 // #docregion routing-module
 })

aio/content/examples/toh-pt5/src/app/hero.service.ts

@@ -6,7 +6,7 @@ import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
 import { MessageService } from './message.service';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class HeroService {
 
   constructor(private messageService: MessageService) { }

aio/content/examples/toh-pt5/src/app/message.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class MessageService {
   messages: string[] = [];
 

aio/content/examples/toh-pt6/src/app/app.module.ts

@@ -19,8 +19,6 @@ import { HeroesComponent }      from './heroes/heroes.component';
 // #enddocregion v1
 import { HeroSearchComponent }  from './hero-search/hero-search.component';
 // #docregion v1
-import { HeroService }          from './hero.service';
-import { MessageService }       from './message.service';
 import { MessagesComponent }    from './messages/messages.component';
 
 @NgModule({
@@ -49,7 +47,6 @@ import { MessagesComponent }    from './messages/messages.component';
     HeroSearchComponent
     // #docregion v1
   ],
-  providers: [ HeroService, MessageService ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

aio/content/examples/toh-pt6/src/app/hero.service.ts

@@ -19,7 +19,7 @@ const httpOptions = {
 };
 // #enddocregion http-options
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class HeroService {
 
   // #docregion heroesUrl

aio/content/examples/toh-pt6/src/app/message.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class MessageService {
   messages: string[] = [];