Next-generation platformDeprecated

Creating a routing component

A component which has route definition in the routing module is referred to as Page or Routing Component. This is the component that the router should create when navigating to this route.

Procedure

Perform the following steps to create a routing component:
  1. Run the command: ng g c <component-name> --project=store-extensions
    Note:
    • It is mandatory to pass the argument --project=store-extensions. Failing to do so will create the component in the application-provided src folder (<WORKSPACE>/store-frontend/src). The files created here are ignored and not rendered on browser.

      Do not pass the --skip-import argument if you are creating the component or services for a new feature module.

    Execute the command from within the module, so that corresponding module.ts file is updated with the new component.

  2. Add routes in the <module-name>.routing.module.ts file.
    • Routes identify the view to be displayed when a user clicks a link.
    • A Route has two properties:
      • path: A string that matches the URL in the browser address bar.
      • component: The component that the router should create when navigating to this route.
    For example, if you want to navigate to http://localhost:4500/store/user/user-list, the route definition for this route in the user-routing.module.ts is as follows:
    { 
    path: ‘user-list’,  
    component: UserListComponent
    }