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

PR Close #22961

aio/content/examples/providers/src/app/app.module.ts

@@ -6,7 +6,6 @@ import { UserService } from './user.service';
 
 @NgModule({
   imports:      [ BrowserModule ],
-  providers:    [ UserService ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })

aio/content/examples/providers/src/app/user.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { UserService } from './user.service';
+
+@NgModule({
+  providers: [UserService],
+})
+export class UserModule {
+}

aio/content/examples/providers/src/app/user.service.0.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+}

aio/content/examples/providers/src/app/user.service.1.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+import { UserModule } from './user.module';
+
+@Injectable({
+  providedIn: UserModule,
+})
+export class UserService {
+}

aio/content/examples/providers/src/app/user.service.spec.ts

@@ -3,9 +3,7 @@ import { UserService } from './user.service';
 
 describe('UserService', () => {
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [UserService]
-    });
+    TestBed.configureTestingModule({});
   });
 
   it('should ...', inject([UserService], (service: UserService) => {

aio/content/examples/providers/src/app/user.service.ts

@@ -5,7 +5,9 @@ export class User {
   name: string;
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class UserService {
 
   constructor() { }