Create New Page

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.

n Angular standalone, without using Angular CLI, you typically create routes and routing manually. If you want to create a new routing file according to your folder name, you would follow these steps:.

Create a Routing File :

Suppose you have a folder named example, and you want to create a routing file for it. You can create a file named example.routes.ts within the example folder.

Define Routes:

In the example.routes.ts file, you define the routes specific to the example module. Here's an example of how you might define routes:

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_routes_path',
     loadChildren: () => import('relative_path_for_routes/routes_name.routes')
    },
]

Creating a New Component

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

ng generate component component_name

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

ng generate component component_name --skip-tests

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-routing.routes.ts file and create our route there. So the route for our newly create component will look something like this.


import { component_name } from './component_name/component_name';
import { Routes } from "@angular/router";

  export default [
    {
      path: 'componentPath',
      component: Component
     },
  ] as Routes;

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 { Routes } from "@angular/router";
import { component_name1 } from './component_name1/component_name1';
import { component_name2 } from './component_name2/component_name2';

export default [
        {
          path: 'parentPath',
          children: [
           {
            path: 'childPath1',
            component: component_name1
           },
           {
            path: 'childPath2',
            component: component_name2
           },
        }
 ] as Routes;