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

First, navigate to the app/pages folder and create a suitable folder name for your page. For example, if you are creating an authentication page, you might name it auth.

Now, open that folder in the terminal and execute the following command:

ng generate component component_name

This will create a folder with the name component_name, inside which the following files will be generated: component_name.component.ts, component_name.component.html, component_name.component.scss, and component_name.component.spec.ts (for testing).

Create a route file for that component. Add a new file in component_name named with component_name.routes.ts

Info: You can make Angular skip creating spec.ts file while creating a component by using this command:

ng generate component component_name --skip-tests

To display this component in the browser, we need to define a route for it.

Navigate to app.routes.ts and add the following route:

import { component_nameComponent } from './component_name/component_name.component';
const routes: Routes = [
  {
      path: 'componentPath',
      component: Component
  },
]

If you want to lazy-load the component, use:

{
  path: 'componentPath',
  loadChildren: () => import('../component_name/component_name.routes').then(r => r.component_name),
},

And that's it! Now you can access your newly created page through the specified route.

Warning: If you add a new link in the sidebar, make sure to update the menu.ts file accordingly, otherwise, the browser may not find the component and return a Page Not Found error.

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