No directive is matched on attribute ngFor

Hello,

I get "No directive is matched on attribute ngFor" including missing type for iteration variable, which is the real showstopper (no autocompletion etc).

ng serve / ng build work as expected (so does the actual iteration at runtime).

If I forgot something, please ask :-)

Thanks in advance.

 

What I tried and did not work:

  • Reinstalled node (with apt from deb https://deb.nodesource.com/node_14.x hirsute main)
  • Reinstalled angular/cli (sudo npm install -g angular-cli)
  • Installed angular/cli locally (not globally)
  • Invalidated Idea Caches
  • Mark directory as "NOT EXCLUDED": node_modules/@angular
  • Imported CommonModule in app.module.ts (in imports)

 

Steps to reproduce are:

ng new angular

 

app.component.ts

import {Component} from '@angular/core';

export class X {
a: number = 5;

constructor(a: number) {
this.a = a;
}

}

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
title = 'angular';

xs: X[] = [new X(4)];

}

 

app.component.html

<div *ngFor="let x of xs">
{{x.a}}
</div>

 

ng version

Angular CLI: 12.2.0
Node: 14.17.4
Package Manager: npm 6.14.14
OS: linux x64

Angular: 12.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1202.0
@angular-devkit/build-angular 12.2.0
@angular-devkit/core 12.2.0
@angular-devkit/schematics 12.2.0
@schematics/angular 12.2.0
rxjs 6.6.7
typescript 4.3.5

 

IDE version

IntelliJ IDEA 2020.1.4 (Ultimate Edition)
Build #IU-201.8743.12, built on July 21, 2020
Runtime version: 11.0.7+10-b765.65 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Linux 5.4.0-80-generic
GC: ParNew, ConcurrentMarkSweep
Memory: 725M
Cores: 8
Non-Bundled Plugins: Lombook Plugin
Current Desktop: MATE

 

cat /etc/lsb-release

DISTRIB_ID=LinuxMint
DISTRIB_RELEASE=20.2
DISTRIB_CODENAME=uma
DISTRIB_DESCRIPTION="Linux Mint 20.2 Uma"
0
10 comments

Elena Pogorelova

now the exactly same thing is happenng with Angular 13.

Installing Webstorm Beta from (2021.3, Nov 2nd) didn't help either. 

5

same problem with angular 13 (angular-cli 13.0.1) and latest version (2021.2.3)

5

2021.3 will be released by the end of November

3

Angular 13 isn't supported yet. Please follow https://youtrack.jetbrains.com/issue/WEB-53312 to be notified about updates.

2

For the people still encoutering this problem, change the "in" inside *ngFor with "of".

It should be:

<div *ngFor="let item of items">
{{ item.value }}
</div>
2

This is really annoying and we can't downgrade angular for that. It messes up the typing within *ngfor aswell. Can this be avoided in future versions?

1

Must be a problem with lazy-compiled Ivy packages; similar issue is fixed in 2021.1.2. Please consider upgrading WebStorm to the latest version that supports Angular 12

0

As for stated in https://youtrack.jetbrains.com/issue/WEB-53312#focus=Comments-27-5449385.0-0, "Issue is already solved and will be available in all JS-enabled 2021.3 products." When will those be available for upgrade?

0

I have the same error in PHPStorm, this is the version of my IDE

PhpStorm 2021.2.3
Build # PS-212.5457.49, built on October 13, 2021

Runtime version: 11.0.12 + 7-b1504.40 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 12.0.1

0

Cifuenteskevin85 are you using Angular 13? If yes, you need upgrading to 2021.3 when it's released

0

Please sign in to leave a comment.