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.
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
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)
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?
Angular 13 isn't supported yet. Please follow https://youtrack.jetbrains.com/issue/WEB-53312 to be notified about updates.
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?
2021.3 will be released by the end of November
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
For the people still encoutering this problem, change the "in" inside *ngFor with "of".
It should be: