Is it not possible to have the template of the pages in a .html file?

[sawa-ko]

I have seen several examples and they all have the template within the same component .ts file, and not in a .html file. I wonder if it is not compatible with the file-based router, if it is really compatible, an example of how it should be? I prefer to have my template and my code separately.

[dalenguyen]

I think you can do this

import { LoginComponent } from 'your-component-path';

export default LoginComponent;

Then in LoginComponent, you can have html separately.

[sawa-ko]

It seems that there is no official support then, a little strange to do it that way.

[brandonroberts]

External styles and templates are definitely supported also

Example: https://github.com/analogjs/analog/tree/beta/apps/analog-app/src/app/pages/shipping

[sawa-ko]

Thanks for the confirmation, but there is some way to have a pattern like the following, for example, to have a better order of files.

- index.page.ts
- about
  - loader.ts
  - component.ts
  - template.html (Optional if the component.ts file already has it in its options.)
  - style.css (Optional if the component.ts file already has it in its options.)

By this I mean being able to create a folder that acts as a page and that the files inside act as a source.

And one more question, if I want to create components only for that page, can I create a folder inside, for example, components, without problems for the router?

src/
└── app/
    └── pages/
        └── (auth)/
            ├── login.page.ts
            ├── signup.page.ts
            └── components (folder with angular components)

[brandonroberts]

Yes, you can nest the files inside the folder.

- index.page.ts
- about
  - loader.ts
  - index.page.ts <-- /about
  - template.html (Optional if the component.ts file already has it in its options.)
  - style.css (Optional if the component.ts file already has it in its options.)

Nested layouts do need a .page.ts file alongside the folder though

- index.page.ts
- parent <-- layout folder
  - child
    - index.page.ts <-- /parent/child
- parent.page.ts <-- router-outlet

Also, yes, you can colocate non-page TypeScript files next to the page files

src/
└── app/
    └── pages/
        └── (auth)/
            ├── login.page.ts
            ├── signup.page.ts
            └── components (folder with angular components)

Only TypeScript files with the .page.ts extension are recognized as routes.