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.