Decorators problem for Angular project.

Hello,

I tried to use the plugin in the Angular project and got this error:

> prettier --write src/app/app.component.ts --config ./.prettierrc
src\app\app.component.ts
[error] src\app\app.component.ts: SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (5:0)
[error]    1 | import { isEmpty } from "lodash-es";
[error]    2 | 
[error]    3 | import { Component } from "@angular/core";
[error]    4 | 
[error]    5 | @Component({
[error]    6 |   selector: "app-root",
[error]    7 |   templateUrl: "./app.component.html",
[error]    8 |   styleUrls: ["./app.component.css"]
[error]    9 | })
[error]   10 | export class AppComponent {
[error]   11 |   title = "ng-prettier";
[error]   12 | 
[error]   13 |   get text(): string {
[error]   14 |     return isEmpty(this.title) ? "" : this.title;
[error]   15 |   }
[error]   16 | }
[error]   17 | 
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! ng-prettier@0.0.0 format: `prettier --write src/app/app.component.ts --config ./.prettierrc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the ng-prettier@0.0.0 format script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I use:

• Prettier: 2.2.0
• Angular: 11.0.2
• Typescript: 4.0.5
• Plugin version: 1.3.0

What am I doing wrong? Is there any workaround?

Thanks a lot.

NOTE: No problem with React.

[byara]

With the release of v2.0.1, this should be fixed. Either prettier will figure out the syntax correctly, or you can use experimentalBabelParserPluginsList in your .prettierrc to pass the correct parser name.

If there was still problems, you can of course re-open this issue.

[temofey1989]

@byara, you are right. After adding "parser": "angular" to the .prettierrc the command executed with no error. This is my .prettierrc file:

{
  "tabWidth": 2,
  "printWidth": 120,
  "singleQuote": false,
  "useTabs": false,
  "bracketSpacing": true,
  "semi": true,
  "trailingComma": "none",
  "importOrder": [
    "^@angular/(.*)$",
    "^rxjs(.*)$",
    "^lodash(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "parser": "angular"
}

Nevertheless, now I have another problem… Formatted code looks like this:

import { isEmpty } from "lodash-es"; import { Component } from "@angular/core"; @Component({ selector: "app-root",
templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title =
"ng-prettier"; get text(): string { return isEmpty(this.title) ? "" : this.title; } }

This looks not really prettiery… 😄