[aio]: many mistakes in the NgModule guide

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

I have just read (again) the guide about NgModule on angular.io, and spotted many mistakes or problems.

• https://angular.io/guide/ngmodules#the-basic-ngmodule:

  • implies that the CLI generates a module which imports FormsModule and HttpModule, which isn’t true.

• https://angular.io/guide/ngmodule-vs-jsmodule:

  • implies that the CLI generates a module which imports FormsModule and HttpModule, which isn’t true.

• https://angular.io/guide/frequent-ngmodules:

  • suggests using the deprecated HttpModule to talk to a server, instead of using HttpClientModule

• https://angular.io/guide/module-types:

  • the section in the left menu is named “Types of NgModules”, whereas the page is titled “Types of Feature Modules”.
  • It lists “Feature Modules” as a prerequisite, although the section about Feature modules comes after this page in the left menu hierarchy.
  • It tells “Angular’s HttpModule is a good example of a service module”, although HttpModule is deprecated

• https://angular.io/guide/entry-components:

  • still uses the deprecated HttpModule. Imports FormsModule, HttpModule and AppRoutingModule although they don’t bring anything useful to the understanding of entry components.

• https://angular.io/guide/feature-modules#rendering-a-feature-modules-component-template:

  • Says “To see this HTML in the AppComponent, you first have to export the CustomerDashboardComponent in the CustomerDashboardModule. In customer-dashboard.module.ts, just beneath the declarations array, add an exports array containing CustomerDashboardModule:.” But the following example doesn’t have any export.

• https://angular.io/guide/providers:

  • Says “This creates a service called UserService and returns a message telling you that you need to provide it.”. But no, the CLI doesn’t return such a message anymore.
  • Says: “Update app.module.ts by importing it with your other import statements at the top of the file and adding it to the providers array:”. But the following example doesn’t import the service, and doesn’t have any provider.

• https://angular.io/guide/singleton-services#providing-a-singleton-service:

  • Says: “For example, a route will have an associated module. When the route is activated, an injector is created from that module as a child of the current injector. When you navigate away from the route, the injector is destroyed. This means that services declared in a route module will have a lifetime equal to that of the route.”. But what is a route module? The “Types of NgModule” page only describes what a “Routed feature module” and a “Routing module” are. But it doesn’t tell what a “route module” is. A concrete example showing how to limit the scope of a service to a route would be nice. There is no such explanation in the https://angular.io/guide/providers#provider-scope section, although that’s the one discussing how to limit the scope of a provider.

• https://angular.io/guide/singleton-services#forroot:

  • Says “It also must be imported by the individual route components”. That’s not really correct: the components don’t import the RouterModule. Feature modules, containing components, are the ones that must also import the RouterModule.
  • Says “If the RouterModule didn’t have forRoot() then each route component would instantiate a new Router instance”. That is very unclear to me. Again: the guide shows how to limit the scope of a service to a component, by adding its provider to the component’s metadata. But that is not the case here, and it’s thus unclear why each route component would have its own Router instance.
  • Says “whereas all route components import RouterModule which does not include the Router”. But again, components don’t import modules. Modules do import modules.

• https://angular.io/guide/lazy-loading-ngmodules#routes-at-the-app-level:

  • The default route redirects to itself, which doesn’t make much sense to me.

• https://angular.io/guide/sharing-ngmodules:

  • The indentation in the imports of the example is messy

• https://angular.io/guide/sharing-ngmodules#using-components-vs-services-from-other-modules:

  • missing space in sharedservices

• https://angular.io/guide/ngmodule-faq#how-do-i-restrict-service-scope-to-a-module

  • contains {@ q-root-component-or-module}

[trotyl]

@gkalpak I think you can continue with #21589 first, I’ll remove the conflict parts later. (AFAIK the official ones are always get merged quickly, so it would be better for users 😃 )

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}