Replace all your component inline template properties with templateUrl and generate the respective HTML files automatically.

// app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <p>Lorem ipsum</p>
  `,
})
export class AppComponent {}

// app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {}

<!-- app.component.html -->

<h1>Tour of Heroes</h1>
<p>Lorem ipsum</p>

Firstly, make sure you are using some version control system like Git or you have a backup of your project. This will overwrite your existing TS files.

Once you've done that, run:

npx ng-template-urlify /path/to/your/files

or

npm install -g ng-template-urlify
ng-template-urlify /path/to/your/files

Say you have a huge project with lots of components and have been using inline templates since the beginning. For any reason (performance on VSCode is one of them – HTML templates perform much better than inline ones), you want to change all your components to have separate HTML files instead of inline properties.

This will come in handy – with one command you can transform all your components to have separate HTML files. Otherwise you would have to do it manually.

Apache 2.0