I have followed the file structure as explained on this page. There are components and pages folders for each feature modules that seems to be good approach in odder to split a page to its components and merge them in page component. However, I have never use a page approach before and need to be sure if the following approach is ok or not (it is just built by guess, not based on a proper approach):

home
  |---- components
     |---- component-a.html | ts
     |---- component-b.html | ts
     
  |---- pages
     |---- home.page.html | ts

My questions are:

1. Is it good practice to use *.page for the pages that contains components in order to differentiate pages and components as shown below?

2. Is the following usage is correct or is there a better approach for this usage (pages and components folder structure as explained on this page)?

3. If there is just a single component, should I create a page component for consistency of the other parts of project? Or in such cases should I just create a component and delete pages folder in the related feature module folder?

component-a.html:

<p>This is component a</p>

component-a.ts:

export class AComponent {
}

component-b.html:

<p>This is component b</p>

component-b.ts:

export class BComponent {
}

home.page.html:

<component-a></component-a>
<component-b></component-b>

home.page.ts:

export class HomePage {
}

Source: Angular Questions