How Can I Resolve the "Couldn't resolve parser 'angular'" Error When Using Prettier in StackBlitz?

I’m trying to utilize prettier in StackBlitz to format HTML in Angular, but I encounter the following error:

Error: Couldn’t resolve parser "angular". Parsers must be explicitly added to the standalone bundle.

I’m uncertain about what’s missing. Any assistance would be appreciated.

StackBlitz demo

The code I’m using is as follows:

import prettier from 'prettier';
import parserAngular from 'prettier/parser-angular';
console.clear();

console.log({ parserAngular }); // Checking existence.

const html = `
<span *ngIf="true">
  do {{ some | json: ja }} bla
</span>
`;

const output = prettier.format(html, {
  plugins: [parserAngular],
  parser: 'angular',
  singleQuote: true,
  arrowParens: 'always',
  semi: true,
  bracketSameLine: true,
  trailingComma: 'es5',
  printWidth: 140,
});
console.log(output);

>Solution :

You should include parser-html in the plugins array:

stackblitz

// Import stylesheets
import './style.css';
import prettier from 'prettier';
import parserAngular from 'prettier/parser-angular';
import parserHtml from 'prettier/parser-html';
console.clear();

console.log({ parserAngular });

// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `<h1>TypeScript Starter</h1>`;

const html = `
<span *ngIf="true">
  do {{ some | json: ja }} bla
</span>
`;

const output = prettier.format(html, {
  plugins: [parserAngular, parserHtml],
  parser: 'angular',
  singleQuote: true,
  arrowParens: 'always',
  semi: true,
  bracketSameLine: true,
  trailingComma: 'es5',
  printWidth: 140,
});
console.log(output);