Create a module with routing

For create new module you can use following command from your root directory. module-name is a name of your desire module.

                         	
 ng generate module <module-name>
 
 e.g.
 
 ng generate module employee 
							
						

Add a component to the feature module

For add new component in module you can use following command from your root directory. module-name is a name of your desire module & component-name is a name of your component.

                         	
 ng generate component <module-name>/<component-name> ;
 
 e.g.
 
 ng generate component employee/salary ;
							
						

We are currently in the process of adding a new page to the Dashboard module, titled Dashboard3.

To create a new component for Dashboard3 using Angular CLI, run the following command:

                                        
ng g c dashboard/dashboard3
                                        
                                

Options	Description
ng	Refers to the Angular CLI command.
g	Stands for "generate" — it tells Angular to create something new.
c	Specifies that you are generating a component.
dashboard/dashboard3	The name of the component you're creating.





• When setting up routing for a Dashboard module in Angular, it's common to define routes in a file such as dashboard.routes.ts (or a similarly named file depending on your project structure). Below is an example of how to configure the routing for an Dashboard module that includes the Dashboard3Component.

  
  

  
  import { Route } from '@angular/router';
  import { Dashboard1Component } from './dashboard1/dashboard1.component';
  import { Dashboard2Component } from './dashboard2/dashboard2.component';
  import { Dashboard3Component } from './dashboard3/dashboard3.component';
  import { Page404Component } from 'app/modules/sessions/page404/page404.component';
  
  export const DASHBOARD_ROUTES: Route[] = [
      {
      path: '',
      redirectTo: 'dashboard1',  // Default route if no path is provided
      pathMatch: 'full',
      },
      {
      path: 'dashboard1',
      component: Dashboard1Component,  // Route to Dashboard1Component
      },
      {
      path: 'dashboard2',
      component: Dashboard2Component,  // Route to Dashboard2Component
      },
      {
      path: 'dashboard3',
      component: Dashboard3Component,  // Route to Dashboard3Component
      },
      {
      path: '**',
      component: Page404Component,  // Wildcard route for undefined paths
      },
  ];
      
  
                                 





• To integrate the Dashboard module routing into the app.routes.ts file, you need to add a route that points to the Dashboard module, which will automatically handle routes for individual dashboard components (such as Dashboard3Component).

  Below is an example of how to modify the app.routes.ts file to include a route for the Dashboard module:

  
  

  
  {
      path: 'dashboard',
      loadChildren: () =>
          import('./dashboard/dashboard.routes').then((m) => m.DASHBOARD_ROUTES),
  }
  
                                 

• 
  
  

  To add a new menu entry for Dashboard3 in the menu JSON file, you need to modify the existing dashboard menu structure. Below is an example of how to include Dashboard2 along with Dashboard1 and Dashboard2 in the menu:

  
  

  
  {
      "route": "dashboard",
      "name": "Dashboard",
      "type": "sub",
      "icon": "space_dashboard",
      "children": [
          {
          "route": "dashboard1",
          "name": "Dashboard 1",
          "type": "link"
          },
          {
          "route": "dashboard2",
          "name": "Dashboard 2",
          "type": "link"
          },
          {
          "route": "dashboard3",
          "name": "Dashboard 3",
          "type": "link"
          }
      ]
  }
  
                                 

Thats it!

Now you can access salary page using url http://localhost:4200/#/dashboard/dashboard3

Type	URL
Angular	https://angular.dev/guide/ngmodules/lazy-loading