Now that we have our high-level components defined as Manager, Inventory, and POS, we can define them as modules. These modules will be different from the ones you've created so far, for routing and Angular Material. We can create the user profile as a component on the app module; however, note that user profile will only ever be used for already authenticated users, so it makes sense to define a fourth module only meant for authenticated users in general. This way, you will ensure that your app's first payload remains as minimal as possible. In addition, we will create a Home component to contain the landing experience for our app so that we can keep implementation details out of app.component:

1. Generate manager, inventory, pos, and user modules, specifying their target module and routing capabilities:

$ npx ng g m manager -m app --routing
$ npx ng g m inventory -m app --routing
$ npx ng g m pos -m app --routing
$ npx ng g m user -m app --routing

2. Verify that you don't have CLI errors.

Note that using npx on Windows may encounter an error such as Path must be a string. Received undefined. This error doesn't seem to have any effect on the successful operation of the command, which is why it is critical to always inspect what the CLI tool generated.

3. Verify the folder and the files are created:

/src/app
│   app-routing.module.ts
│   app.component.css
│   app.component.html
│   app.component.spec.ts
│   app.component.ts
│   app.module.ts
│   material.module.ts
├───inventory
│        inventory-routing.module.ts
│        inventory.module.ts
├───manager
│        manager-routing.module.ts
│        manager.module.ts
├───pos
│        pos-routing.module.ts
│        pos.module.ts
└───user
        user-routing.module.ts
        user.module.ts

4. Examine how ManagerModule has been wired.

A child module implements an @NgModule similar to app.module. The biggest difference is that a child module does not implement the bootstrap property, which is required for your root module, to initialize your Angular app:

src/app/manager/manager.module.ts
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'

import { ManagerRoutingModule } from './manager-routing.module'

@NgModule({
  imports: [CommonModule, ManagerRoutingModule],
  declarations: [],

})
export class ManagerModule {}

Since we have specified the -m option, the module has been imported into app.module:

src/app/app.module.ts
...
import { ManagerModule } from './manager/manager.module'
...
@NgModule({
  ...
  imports: [
    ...
    ManagerModule 
  ],
...

In addition, because we also specified the --routing option, a routing module has been created and imported into ManagerModule:

src/app/manager/manager-routing.module.ts
import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'

const routes: Routes = []

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ManagerRoutingModule {}

Note that RouterModule is being configured using forChild, as opposed to forRoot, which was the case for the AppRouting module. This way, the router understands the proper relationship between routes defined in different modules' contexts and can correctly prepend /manager to all child routes in this example.