To create a page we need to create routes and components, and write some import lines in few files, but fortunately Angular provides commands to automate this task. In this guide we will see how to use them.

This will Create a folder and add route_name.routes.tas file to it routes_name.routes.ts.

In our routes.ts file, we will import this routes and give a path to it. To know more about routing follow our Guide to Routing.

The path for this routes in routes.ts file will look something like this.

import { Routes } from '@angular/router';

export const content: Routes = [
{
    path: 'new_path',
    loadChildren: () => import('relative_path_for_routes/routes_name.routes').then(m => m.routes_selector)
  },
]

Creating a New Component

Now to create pages inside this routes we will run the below given command:

ng generate component component_name

Info: Did you know that you can create component with just similarly create component with ng g c component_name.

This command will create a folder with name component_name and inside that folder there will be 4 more files, with the extensions .html, .scss, .spec.ts and .ts

Now you can add your html code in .html file , your styles in .scss file and any other functionality related code in .ts file. Usually .spec.ts file is created for testing purpose but we have no use for it currently, so we recommend that you do not make any changes in it.

Info: Here angular has created a .scss file for styling because when installing the project we selected scss language for our styles. You can select css or any other language of your choice to style your theme, but make sure you do that while you are installing the project.

Adding route

Now that we have created our component, to display this component in our browser we need to provide a route for it and attach this component to that route.

We will navigate to the routes_name.routes file and create our route there. So the route for our newly create component will look something like this.

import { component_nameComponent } from './component_name/component_name.component';

export const routes: Routes = [
    {
        path: 'componentPath',
        component: Component
    }
]

This was for a single component, but if you create multiple components in a single routes and want to give paths for them, it will look something like this:

import { component_name1Component } from './component_name1/component_name1.component';
import { component_name2Component } from './component_name2/component_name2.component';

export const routes: Routes = [
    {
    path: 'parentPath',
    children: [
      {
        path: 'childPath1',
        component: component_name1Component
      },
      {
        path: 'childPath2',
        component: component_name2Component
      },
    ]
  }
]

And thats it, now we can access this page through the route that we have created.

Warning: Make sure that when you create a new link in sidebar ,include proper path in the menu.ts file or else the browser won't be able to find the component at the wrong route and you will get an error of page not found.

Tip: You can find more information on routing in our Guide to Routing page.