Create Container Components for Retrieving Data in an Angular CLI Project

In this lesson we will add the ProductModule, where our actual application code will live.

ng g m product --routing

We will add 2 routes to AppRoutingModule, the first is a redirect route that redirects any unhandled paths to products. The second route is the actual products route, that 'lazy-loads' the ProductModule.

We use the ng command to create the ProductListComponent and ProductDetailComponent, which are so called 'containers components'.

Container components are responsible for fetching data, handling routes and passing data into the 'presentational components'

We will add 2 routes to ProductRoutingModule, one to each of our new Container Components.

Lastly we will use ActivatedRoute in ProductDetailComponent to fetch the :id from the route.