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"
Please sign in to leave a comment.
Elena Pogorelova
now the exactly same thing is happenng with Angular 13.
Installing Webstorm Beta from (2021.3, Nov 2nd) didn't help either.
same problem with angular 13 (angular-cli 13.0.1) and latest version (2021.2.3)
2021.3 will be released by the end of November
Angular 13 isn't supported yet. Please follow https://youtrack.jetbrains.com/issue/WEB-53312 to be notified about updates.
For the people still encoutering this problem, change the "in" inside *ngFor with "of".
It should be:
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?
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
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?
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
Cifuenteskevin85 are you using Angular 13? If yes, you need upgrading to 2021.3 when it's released