How to Prevent Prettier from Breaking Angular Template Object Bindings?

Question

I'm encountering a formatting issue between Prettier and Angular's template parser. Specifically, Prettier reformats my inline Angular template in a way that introduces an NG5002 parser error during build.

Here's the original Angular template code that works fine:

<a class="main-color"
 [routerLink]="'/lessons/view/' + data.id"
 [queryParams]="{ lessonId: data.id, studentId: (currentRoleId == 3 && data?.student_id ) ? data?.student_id : null }"
 >
 <span nz-icon nzType="eye" nzTheme="outline"></span
 ></a>

However, after running Prettier, it gets reformatted into:

<a
 class="main-color"
 [routerLink]="'/lessons/view/' + data.id"
 [queryParams]="{
 lessonId: data.id,
 studentId: currentRoleId == 3 && data?.student_id ? data?.student_id : null,
 }"
 >
 <span nz-icon nzType="eye" nzTheme="outline"></span
 ></a>

And this version breaks the Angular build with the following error:

error NG5002: Parser Error: Unexpected token }, expected identifier, keyword, or string at column 139 in [{
 lessonId: data.id,
 studentId: currentRoleId == 3 && data?.student_id ? data?.student_id : null,
 }] in
148 [queryParams]="{
 ~
149 lessonId: data.id,
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
150 studentId: currentRoleId == 3 && data?.student_id ? data?.student_id : null,
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
151 }"
 ~~~~~~~~~~~~~

.eslintrc.json is

{
 "root": true,
 "ignorePatterns": [
 "projects/**/*"
 ],
 "overrides": [
 {
 "files": [
 "*.ts"
 ],
 "parserOptions": {
 "project": [
 "tsconfig.json"
 ],
 "createDefaultProgram": true
 },
 "extends": [
 "plugin:@angular-eslint/recommended",
 "plugin:@angular-eslint/template/process-inline-templates",
 "plugin:prettier/recommended"
 ],
 "rules": {
 "@angular-eslint/directive-selector": [
 "error",
 {
 "type": "attribute",
 "prefix": "app",
 "style": "camelCase"
 }
 ],
 "@angular-eslint/component-selector": [
 "error",
 {
 "type": "element",
 "prefix": "app",
 "style": "kebab-case"
 }
 ],
 "prettier/prettier": [
 "error",
 {
 "printWidth": 100,
 "tabWidth": 2,
 "tabs": false,
 "singleQuote": true,
 "semicolon": true,
 "quoteProps": "preserve",
 "bracketSpacing": true,
 "overrides": [
 {
 "files": "*.html",
 "options": {
 "parser": "angular"
 }
 }
 ]
 }
 ]
 }
 },
 {
 "files": [
 "*.html"
 ],
 "extends": [
 "plugin:@angular-eslint/template/recommended",
 "plugin:prettier/recommended"
 ],
 "rules": {
 "prettier/prettier": [
 "error",
 {
 "printWidth": 100,
 "tabWidth": 2,
 "tabs": false,
 "singleQuote": true,
 "semicolon": true,
 "quoteProps": "preserve",
 "bracketSpacing": true,
 "overrides": [
 {
 "files": "*.html",
 "options": {
 "parser": "angular"
 }
 }
 ]
 }
 ]
 }
 }
 ]
}

My Analysis The problem seems to be related to how Prettier reformats the [queryParams] object. It introduces a trailing comma after the last property (studentId: ... ,), which Angular’s template parser does not support in inline object literals.

Temporary Workaround To avoid this issue:

Either remove the trailing comma manually after Prettier formats it.

Or keep the object in a single line to prevent Prettier from reformatting it.

But this is not ideal, especially in large teams or CI environments where formatting is automated.

My Question Is there a way to configure Prettier to avoid formatting object literals in Angular templates this way (especially preventing the trailing comma)? Or is there a known workaround to suppress this formatting behavior specifically for Angular [queryParams]?

Any help or insight would be appreciated!

Answer 1

​To prevent Prettier from adding trailing commas in your Angular templates, you have a couple of options:

1. Configure Prettier to Avoid Trailing Commas:

Prettier's default setting adds trailing commas with ES5 option (like in objects and arrays). To change this behavior:​

In Visual Studio Code:

Go to File > Preferences > Settings.​ Search for "Prettier".​

Find the "Trailing Comma" option and set it to none.

enter image description here

Note: This change affects all files, including your TypeScript files. Because Prettier doesn't allow configuring only for .html file.

You can do this configuration in specific .prettierrc file aswell.

{ "trailingComma" : "none" }

2. Ignore Formatting for Specific Code Blocks:

Add <!-- prettier-ignore --> before the code block you want to exclude.

<!-- prettier-ignore -->
<a
 class="main-color"
 [routerLink]="'/lessons/view/' + data.id"
 [queryParams]="{
 lessonId: data.id,
 studentId: (currentRoleId == 3 && data?.student_id) ? data?.student_id : null
 }"
>
 <span nz-icon nzType="eye" nzTheme="outline"></span>
</a>