New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: update examples for tree-shakeable providers #22961
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
// #docregion | ||
import { NgModule } from '@angular/core'; | ||
|
||
@NgModule({}) | ||
export class HeroModule { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,8 @@ | ||
import { Injectable } from '@angular/core'; | ||
|
||
@Injectable() | ||
@Injectable({ | ||
providedIn: 'root', | ||
}) | ||
export class HeroService { | ||
constructor() { } | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
// #docregion | ||
import { Injectable } from '@angular/core'; | ||
import { HEROES } from './mock-heroes'; | ||
|
||
@Injectable({ | ||
// we declare that this service should be created | ||
// by the root application injector. | ||
|
||
providedIn: 'root', | ||
}) | ||
export class HeroService { | ||
getHeroes() { return HEROES; } | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
// #docregion | ||
import { Injectable } from '@angular/core'; | ||
import { HeroModule } from './hero.module'; | ||
import { HEROES } from './mock-heroes'; | ||
|
||
@Injectable({ | ||
// we declare that this service should be created | ||
// by any injector that includes HeroModule. | ||
|
||
providedIn: HeroModule, | ||
}) | ||
export class HeroService { | ||
getHeroes() { return HEROES; } | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
/** | ||
* A version of `HeroesComponent` that does not provide the `HeroService` (and thus relies on its | ||
* `Injectable`-declared provider) in order to function. | ||
* | ||
* TSP stands for Tree-Shakeable Provider. | ||
*/ | ||
@Component({ | ||
selector: 'app-heroes-tsp', | ||
template: ` | ||
<h2>Heroes</h2> | ||
<app-hero-list></app-hero-list> | ||
` | ||
}) | ||
export class HeroesTspComponent { } |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { BrowserModule } from '@angular/platform-browser'; | ||
import { RouterModule } from '@angular/router'; | ||
import { ServiceModule } from './service-and-module'; | ||
|
||
// #docregion | ||
@NgModule({ | ||
imports: [ | ||
BrowserModule, | ||
RouterModule.forRoot([]), | ||
ServiceModule, | ||
], | ||
}) | ||
export class AppModule { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
// #docregion | ||
import { Injectable, NgModule } from '@angular/core'; | ||
|
||
@Injectable() | ||
export class Service { | ||
doSomething(): void { | ||
} | ||
} | ||
|
||
@NgModule({ | ||
providers: [Service], | ||
}) | ||
export class ServiceModule { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { Injectable } from '@angular/core'; | ||
|
||
// #docregion | ||
@Injectable({ | ||
providedIn: 'root', | ||
useFactory: () => new Service('dependency'), | ||
}) | ||
export class Service { | ||
constructor(private dep: string) { | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { Injectable } from '@angular/core'; | ||
|
||
// #docregion | ||
@Injectable({ | ||
providedIn: 'root', | ||
}) | ||
export class Service { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,7 +6,6 @@ import { UserService } from './user.service'; | |
|
||
@NgModule({ | ||
imports: [ BrowserModule ], | ||
providers: [ UserService ], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The corresponding guide section should be updated accordingly: https://pr22961-854a794.ngbuilds.io/guide/providers#create-a-service There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Guide updates are happening in a separate PR. |
||
declarations: [ AppComponent ], | ||
bootstrap: [ AppComponent ] | ||
}) | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { NgModule } from '@angular/core'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Where is this file used? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sorry, I should've given some context. This is the predecessor PR to the docs updates for tree-shakeable providers. |
||
|
||
import { UserService } from './user.service'; | ||
|
||
@NgModule({ | ||
providers: [UserService], | ||
}) | ||
export class UserModule { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { Injectable } from '@angular/core'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Where is this file used? |
||
|
||
@Injectable({ | ||
providedIn: 'root', | ||
}) | ||
export class UserService { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { Injectable } from '@angular/core'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Where is this file used? |
||
import { UserModule } from './user.module'; | ||
|
||
@Injectable({ | ||
providedIn: UserModule, | ||
}) | ||
export class UserService { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,6 +8,5 @@ import { HeroService } from './heroes'; | |
template: ` | ||
<toh-heroes></toh-heroes> | ||
`, | ||
providers: [HeroService] | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The correspoding recommendation should be changed accordingly: https://pr22961-854a794.ngbuilds.io/guide/styleguide#style-07-03. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Guide updates are happening in a separate PR. |
||
}) | ||
export class AppComponent {} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The corresponding guide section should be updated accordingly: https://pr22961-854a794.ngbuilds.io/guide/dependency-injection#factory-providers