Which @angular/* package(s) are relevant/related to the feature request?

core

Description

Angular perfer separated file for html, css, js.
Current inline html and css strings in component mode is too ugly to use.

As generative AI evolves, which prefer read one file as context. (ChatGPT for vscode, cursor) and edit one file at once. single-file components are more useful than ever.

Please reconsider adding a single component mode that is usable.
even better to make it as default.

Proposed solution

single .angular file component, top level space is html template, place stylesheets and script in tag.

<!-- top level is template -->

<h1>Weather</h1>
@if (forecasts == null){
    <p>
        <em>Loading...</em>
    </p>
}@else{
     ...
}

<style type="text/scss">
    ...
</style>

<script type="text/typescript">
   import {Component} from '@angular/core'; 
   @Component({
        selector: 'app-weather'
    })
   export class WeatherComponent {
       ...
   }
</script>

Alternatives considered

place template in <template> tag like vue