5 lines
8.7 KiB
JSON
5 lines
8.7 KiB
JSON
|
{
|
||
|
|
"id": "guide/migration-injectable",
|
||
|
|
"title": "Migration for missing @Injectable() decorators and incomplete provider definitions",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/migration-injectable.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"migration-for-missing-injectable-decorators-and-incomplete-provider-definitions\">Migration for missing <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> decorators and incomplete provider definitions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-injectable#migration-for-missing-injectable-decorators-and-incomplete-provider-definitions\"><i class=\"material-icons\">link</i></a></h1>\n<h3 id=\"what-does-this-schematic-do\">What does this schematic do?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-injectable#what-does-this-schematic-do\"><i class=\"material-icons\">link</i></a></h3>\n<ol>\n<li>This schematic adds an <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> decorator to classes which are provided in the\napplication but are not decorated.</li>\n<li>The schematic updates providers which follow the <code>{provide: SomeToken}</code> pattern\nto explicitly specify <code>useValue: undefined</code>.</li>\n</ol>\n<p><strong>Example for missing <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code></strong></p>\n<p><em>Before migration:</em></p>\n<code-example language=\"typescript\">\nexport class MyService {...}\nexport class MyOtherService {...}\nexport class MyThirdClass {...}\nexport class MyFourthClass {...}\nexport class MyFifthClass {...}\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n providers: [\n MyService,\n {provide: SOME_TOKEN, useClass: MyOtherService},\n // The following classes do not need to be decorated because they\n // are never instantiated and just serve as DI tokens.\n {provide: MyThirdClass, useValue: ...},\n {provide: MyFourthClass, useFactory: ...},\n {provide: MyFifthClass, useExisting: ...},\n ]\n})\n</code-example>\n<p><em>After migration:</em></p>\n<code-example language=\"ts\">\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class MyService {...}\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class MyOtherService {...}\nexport class MyThirdClass {...}\nexport class MyFourthClass {...}\nexport class MySixthClass {...}\n\n...\n</code-example>\n<p>Note that <code>MyThirdClass</code>, <code>MyFourthClass</code> and <code>MyFifthClass</code> do not need to be decorated\nwith <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> because they are never instantiated, but just used as a <a href=\"guide/glossary#di-token\">DI token</a>.</p>\n<p><strong>Example for provider needing <code>useValue: undefined</code></strong></p>\n<p>This example shows a provider following the <code>{provide: X}</code> pattern.\nThe provider needs to be migrated to a more explicit definition where <code>useValue: undefined</code> is specified.</p>\n<p><em>Before migration</em>:</p>\n<code-example language=\"typescript\">\n{provide: MyToken}\n</code-example>\n<p><em>After migration</em>:</p>\n<code-example language=\"typescript\">\n{provide: MyToken, useValue: undefined}\n</code-example>\n<h3 id=\"why-is-adding-injectable-necessary\">Why is adding <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> necessary?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-injectable#why-is-adding-injectable-necessary\"><i class=\"material-icons\">link</i></a></h3>\n<p>In our docs, we've always recommended adding <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> decorators to any class that is provide
|
||
|
|
}
|