SyntaxError at code-file-loader when .ts contains Angular's @Inject()

[Panagiotis Kapros]

In our codebase, we have gql documents alongside Angular components.
We use https://github.com/kamilkisiela/graphql-inspector for checking validation and coverage reports.

It seems that if a component is using @Inject the following exception occurs:

SyntaxError: Stage 2 decorators cannot be used to decorate parameters (27:4)
    at Object.raise (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:7012:17)
    at Object.parseBindingList (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:8789:16)
    at Object.parseFunctionParams (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:11421:24)
    at Object.parseFunctionParams (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:6164:11)
    at Object.parseMethod (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:10178:10)
    at Object.pushClassMethod (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:11671:30)
    at Object.pushClassMethod (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:6134:11)
    at Object.parseClassMemberWithIsStatic (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:11590:12)
    at Object.parseClassMemberWithIsStatic (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:6007:11)
    at Object.parseClassMember (/ng-test/node_modules/@graphql-toolkit/code-file-loader/node_modules/@babel/parser/lib/index.js:11532:10) {
  pos: 617,
  loc: Position { line: 27, column: 4 }

For example, the following component causes the issue:

const CurrentUserForProfile = gql`
  query CurrentUserForProfile {
    currentUser {
      login
      avatar_url
    }
  }
`;

@Component({
  selector: 'app-dialog',
  template: 'test',
})
export class DialogComponent implements OnInit {
  constructor(
    public apollo: Apollo,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  ngOnInit(): void {
    this.apollo
      .watchQuery<any>({
        query: CurrentUserForProfile,
      })
      .valueChanges.subscribe();
  }
}

If we remove the @Inject(MAT_DIALOG_DATA) public data: any it works fine.

[Arda TANRIKULU]

It seems fixed in 0.10.3
You can see passed tests in here;
https://github.com/ardatan/graphql-toolkit/runs/567484230

graphql-toolkit looks up-to-date in graphql-inspector as well so it will be available in the next version of graphql-inspector.

For now, you can move that query to another file.