5 lines
8.4 KiB
JSON
5 lines
8.4 KiB
JSON
{
|
|
"id": "guide/migration-module-with-providers",
|
|
"title": "ModuleWithProviders Migration",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/migration-module-with-providers.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=\"modulewithproviders-migration\"><code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> Migration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-module-with-providers#modulewithproviders-migration\"><i class=\"material-icons\">link</i></a></h1>\n<h2 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-module-with-providers#what-does-this-schematic-do\"><i class=\"material-icons\">link</i></a></h2>\n<p>Some Angular libraries, such as <code>@angular/router</code> and <code>@ngrx/store</code>, implement APIs that return a type called <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> (typically via a method named <code>forRoot()</code>).\nThis type represents an <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> along with additional providers.\nAngular version 9 deprecates use of <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> without an explicitly generic type, where the generic type refers to the type of the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>.</p>\n<p>This schematic will add a generic type to any <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> usages that are missing the generic.\nIn the example below, the type of the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> is <code>SomeModule</code>, so the schematic changes the type to be <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a><SomeModule></code>.</p>\n<p><strong>Before</strong></p>\n<code-example language=\"ts\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({...})\nexport class MyModule {\n <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> forRoot(config: SomeConfig): <a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a> {\n return {\n ngModule: SomeModule,\n providers: [\n {provide: SomeConfig, useValue: config}\n ]\n };\n }\n}\n</code-example>\n<p><strong>After</strong></p>\n<code-example language=\"ts\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({...})\nexport class MyModule {\n <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> forRoot(config: SomeConfig): <a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a><SomeModule> {\n return {\n ngModule: SomeModule,\n providers: [\n {provide: SomeConfig, useValue: config }\n ]\n };\n }\n}\n</code-example>\n<p>In the rare case that the schematic can't determine the type of <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code>, you may see the schematic print a TODO comment to update the code manually.</p>\n<h2 id=\"why-is-this-migration-necessary\">Why is this migration necessary?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-module-with-providers#why-is-this-migration-necessary\"><i class=\"material-icons\">link</i></a></h2>\n<p><code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> has had the generic type since Angular version 7, but it has been optional.\nThis has compiled because the <code>metadata.json</code> files contained all the metadata.\nWith Ivy, <code>metadata.json</code> files are no longer required, so the framework cannot assume that one with the necessary types has been provided.\nInstead, Ivy relies on the generic type for <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> to get the correct type information.</p>\n<p>For this reason, Angular version 9 deprecates <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> without a generic type.\nA future version of Angular will remove the default generic type, making an explicit type required.</p>\n<h2 id=\"should-i-add-the-generic-type-when-i-add-new-modulewithproviders-types-to-my-application\">Should I add the generic type when I add new <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> types to my application?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-module-with-providers#should-i-add-the-generic-type-when-i-add-new-modulewithproviders-types-to-my-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>Yes, any time your code references the <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> type, it should have a generic type that matches the actual <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> that is returned (for example, <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a><MyModule></code>).</p>\n<h2 id=\"what-should-i-do-if-the-schematic-prints-a-todo-comment\">What should I do if the schematic prints a TODO comment?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-module-with-providers#what-should-i-do-if-the-schematic-prints-a-todo-comment\"><i class=\"material-icons\">link</i></a></h2>\n<p>The schematic will print a TODO comment in the event that it cannot detect the correct generic for the <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> type.\nIn this case, you'll want to manually add the correct generic to <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code>. It should match the type of whichever <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> is returned in the <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> object.</p>\n<h2 id=\"what-does-this-mean-for-libraries\">What does this mean for libraries?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-module-with-providers#what-does-this-mean-for-libraries\"><i class=\"material-icons\">link</i></a></h2>\n<p>Libraries should add the generic type to any usages of the <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> type.</p>\n<h2 id=\"what-about-applications-using-non-migrated-libraries\">What about applications using non-migrated libraries?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-module-with-providers#what-about-applications-using-non-migrated-libraries\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <a href=\"guide/glossary#ngcc\">Angular compatibility compiler</a> (<code>ngcc</code>) should automatically transform any non-migrated libraries to generate the proper code.</p>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/deprecations\n-->\n<!-- links from this doc:\n - api/core/ModuleWithProviders\n - api/core/NgModule\n - api/upgrade/static\n - guide/glossary#ngcc\n - guide/migration-module-with-providers#modulewithproviders-migration\n - guide/migration-module-with-providers#should-i-add-the-generic-type-when-i-add-new-modulewithproviders-types-to-my-application\n - guide/migration-module-with-providers#what-about-applications-using-non-migrated-libraries\n - guide/migration-module-with-providers#what-does-this-mean-for-libraries\n - guide/migration-module-with-providers#what-does-this-schematic-do\n - guide/migration-module-with-providers#what-should-i-do-if-the-schematic-prints-a-todo-comment\n - guide/migration-module-with-providers#why-is-this-migration-necessary\n - https://github.com/angular/angular/edit/master/aio/content/guide/migration-module-with-providers.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |