Angular 11的HTML模板可以很容易地转换为Angular，只需将HTML文件的内容复制到Angular组件的模板中即可。例如，假设我们有一个名为'app.component.html”的Angular 11 HTML模板文件，我们可以创建一个名为'app.component.ts”的Angular组件，并将HTML模板内容粘贴到该组件的模板属性中。下面是一个示例：

HTML模板文件（app.component.html）：

Welcome to my app!
This is some sample text.

与之对应的Angular组件（app.component.ts）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
Welcome to my app!
    
This is some sample text.
  `
})
export class AppComponent {}

在上面的示例中，我们引入了Angular的@Component装饰器并使用它来定义一个名为AppComponent的组件。我们还指定了选择器，该选择器定义了如何在HTML中使用该组件。最后，我们将HTML模板内容复制到组件的模板属性中。

在应用程序的其余部分中，我们可以像使用任何其他Angular组件一样使用AppComponent组件。例如，在我们的应用程序根模块中，我们可以声明AppComponent作为应用程序的顶级组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}