0

For example, when we have 2 array properties on our component:

  • array: an ordinary Array
  • anonymousArray a subclass of Array
export class AppComponent {
  readonly array = new Array<{
    text: string;
    value: string;
  }>();

  readonly anonymousArray = new class extends Array<{
    text: string;
    value: string;
  }> {
    add(text: string, value: string) {
      this.push({
        text,
        value
      });
    }
  }();

  constructor() {
    this.array.push({
      text: "text1",
      value: "value1"
    });

    this.anonymousArray.add("text", "value");
  }
}

Then code-completion in the template works for the ordinary Array:
enter image description here
but not for the sub-class:
enter image description here

Here's a full Stackblitz example

IntelliJ will even show errors:
enter image description here

I wonder how this is possible in the first place: i.e. since Array.isArray(this.anonymousArray) is true, how/why does the template even see a difference?
Is this maybe a bug in Ivy or the angular language service?

TmTron
  • 17,012
  • 10
  • 94
  • 142
  • Code completion and syntax highlighting are features of your IDE/editor and unrelated to Angular or TypeScript. – Thomas Sablik Mar 12 '21 at 08:26
  • 2
    @ThomasSablik And how do you think IDE knows what to hint? It's definitely related to Angular and it's called `@angular/language-service` – Roberto Zvjerković Mar 12 '21 at 08:37
  • @RobertoZvjerković The IDE parses the code. Therefore different IDEs have different behavior in code completion and syntax highlighting. I'm using IntelliJ and VSCode on a daily basis and the differences regarding syntax highlighting and code completion are big. Even the differences between two versions of the same IDE or editor can be big. This is not a question about Angular or TypeScript. This is a question about the IDE or editor. That's nothing you would ask someone from the Angular or TypeScript team. That's something you should ask the IntelliJ team. – Thomas Sablik Mar 12 '21 at 08:39
  • 1
    @RobertoZvjerković It's an Angular or TypeScript question if the actual transpile or build process fails. – Thomas Sablik Mar 12 '21 at 08:44
  • @ThomasSablik Let's say I create a language called Roberto++. I provide no language API and no documentation. How do you think an IDE could possibly provide hinting and autocompletion? Hint (pun intended): it couldn't. No IDE provided Angular template autocompletion until Angular provided `@angular/language-service`. It's also a Typescript thing, because TS provides types for Angular to work with. – Roberto Zvjerković Mar 12 '21 at 08:51
  • @RobertoZvjerković Since the provided transpiler can handle it and the project can be built it's not a fault of the Angular or TypeScript team. It's a bug in the IDE or editor. And since IntelliJ and VSCode behave differently at least one of them has its own parser and doesn't use `@angular/language-service`. _" I provide no language API and no documentation."_ Really? Angular and TypeScript are not documented? It's not an Angular or TypeScript question if there is a bug in an IDE. It's also not an Angular or TypeScript question if there is a bug in Internet Explorer. – Thomas Sablik Mar 12 '21 at 08:55
  • Thanks for the comments - I even didn't know that an angular language service exists. I've updated the tags and added a link to the ng-lang-service docs. – TmTron Mar 12 '21 at 08:56

1 Answers1

1

Works fine for me in the most recent IDEA version:

enter image description here

Edit: appears to be specific to libraries versions being used, tracked at WEB-49995

lena
  • 90,154
  • 11
  • 145
  • 150
  • IntelliJ IDEA 2020.3.2 (Ultimate Edition), `Build #IU-203.7148.57, built on January 26, 2021`, TypeScript: `4.0.5`. Can you maybe clarify which component is responsible for this? i.e. is it the IntelliJ plugin or the angular-language-service? – TmTron Mar 12 '21 at 09:44
  • 1
    It's a plugin; Angular Language Service is not used/required since version 2019.1, we've implemented all of Angular Compiler validations as inspections, which has some additional benefits of being able to provide some basic quick fixes like adding missing `selector` property, or something as neat as auto-module import – lena Mar 12 '21 at 10:38
  • Do you have Typescript language service enabled? – lena Mar 12 '21 at 10:38
  • Yes. Typescript language service is enabled (also `Show project errors` is `true`, `Recompile on changes` is `false`) – TmTron Mar 12 '21 at 10:50
  • strange... both code completion and error highlighting work fine for me in IDEA 2020.3.2 using your example if Typescript service is ON. If it's off, there are some minor issues with navigation, but still no errors – lena Mar 12 '21 at 10:55
  • 1
    I've just downloaded the Stackblitz project and opened it in IntelliJ and everything works. So it some settings /libs must be different. I'll try to find out.. – TmTron Mar 12 '21 at 11:11
  • Found the setting: when the [lib in tsconfig.json](https://www.typescriptlang.org/tsconfig#lib) is > `es2018` the described issue occurs. I also note a warning on the `anonymousArray` in the template: like `X is not assignable to type X & NgIterable) | undefined | null` – TmTron Mar 12 '21 at 11:53
  • 1
    thanks, logged as https://youtrack.jetbrains.com/issue/WEB-49995 – lena Mar 12 '21 at 12:35