> For the complete documentation index, see [llms.txt](https://smu-portal.gitbook.io/get-started/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smu-portal.gitbook.io/get-started/book-module-tutorial/frontend/create-main-component.md).

# Create Main Component

In this part, we create a new component which will be the main page for our app. \
We start by checking in our console that we are in the correct directory:

```
/smuportal-frontend/src/app/applications/book-management-system
```

We generate our component by typing in the console:

```
ng generate component bms-main-page
```

Now we need to make sure that our book management system module is updated:

{% tabs %}
{% tab title="src/app/applications/book-management-system/book-management-system.module.ts" %}

```javascript
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from "@angular/router";
import { ListBooksComponent } from './list-books/list-books.component';
import { BmsMainPageComponent } from './bms-main-page/bms-main-page.component';

const routes: Routes = [
  {
    path: "",
    component: BmsMainPageComponent
  },
  {
    path: "list",
    component: ListBooksComponent
  },
];

@NgModule({
  declarations: [ListBooksComponent, BmsMainPageComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
  ],
  exports: [RouterModule]
})
export class BookManagementSystemModule { }
```

{% endtab %}
{% endtabs %}

Finally, in our book management folder, we create a new file "index.ts" and add the following lines:

{% tabs %}
{% tab title="src/app/applications/book-management-system/index.ts " %}

```javascript
export * from "./list-books"
export * from "./bms-main-page"
```

{% endtab %}
{% endtabs %}