How to Prevent Prettier from Breaking Angular Template Object Bindings?

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": [
"pluginangular-eslint/recommended",
"pluginangular-eslint/template/process-inline-templates",
"pluginrettier/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": [
"pluginangular-eslint/template/recommended",
"pluginrettier/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!

Continue reading...