Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)
AngularAngular2 TemplateAngular Problem Overview
I'm using Angular2 2.1.0
. When I want to display a list of companies, I got this error.
in file.component.ts
:
public companies: any[] = [
{ "id": 0, "name": "Available" },
{ "id": 1, "name": "Ready" },
{ "id": 2, "name": "Started" }
];
In file.component.html
:
{{i}} {{item.name}}
Angular Solutions
Solution 1 - Angular
Add BrowserModule
to imports: []
in @NgModule()
if it's the root module (AppModule
), otherwise the CommonModule
.
// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';
import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
imports: [BrowserModule, /* or CommonModule */],
..
})
Solution 2 - Angular
In my case, the issue was that my teammate mentioned *ngfor
in templates instead of *ngFor
. Strange that there is no correct error to handle this issue (In Angular 4).
Solution 3 - Angular
You have to import CommonModule
in the module where you are using these in-built directives like ngFor
, ngIf
, etc.
import { CommonModule } from '@angular/common'
@NgModule({
imports: [
CommonModule
]
})
export class ProductModule { }
Solution 4 - Angular
There can be any possible reason:
- Your
module
does not haveCommonModule
inimports[]
- Your
component
, where you are using*ngFor
, is not a part of anymodule
. - You might have typo in
*ngFor
i.e.**ngFor
or*ngfor
etc. - If everything seems fine then restart your
IDE
i.e. VS Code, IntelliJ etc.
Solution 5 - Angular
For me the problem was that I did not import the custom made module HouseModule
in my app.module.ts
. I had the other imports.
File: app.module.ts
import { HouseModule } from './Modules/house/house.module';
@NgModule({
imports: [
HouseModule
]
})
Solution 6 - Angular
This can also happen if you don't declare a route component in your feature module. So for example:
feature.routing.module.ts:
...
{
path: '',
component: ViewComponent,
}
...
feature.module.ts:
imports: [ FeatureRoutingModule ],
declarations: [],
Notice the ViewComponent is not in the declarations array, whereas it should be.
Solution 7 - Angular
Things to remember:
When custom modules are used (modules other than AppModule) then it is necessary to import the common module in it.
yourmodule.module.ts
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
exports:[ ],
declarations: []
})
Solution 8 - Angular
Future Readers
Check each of the following:
- The component is declared in a SINGLE angular module
- Make sure you have
import { CommonModule } from '@angular/common';
- Restart the IDE/editor
- Restart the dev server (
ng serve
)
Solution 9 - Angular
I was getting the same error, You can fix through one of this method:
- If you don't have any nested module
a. Import the CommonModule in your App module
b. Import your Component where you are adding the *ngFor in the App Module, define in declarations
// file App.modules.ts
@NgModule({
declarations: [
LoginComponent // declarations of your component
],
imports: [
BrowserModule
DemoMaterialModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule,
AppRoutingModule,
BrowserAnimationsModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
],
providers: [
ApiService,
CookieService,
{
provide: HTTP_INTERCEPTORS,
useClass: ApiInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
c. If you are using the separate module file for routing then Import the CommonModule in your Routing module else Import the CommonModule in your App module
// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', component: LoginComponent }
];
@NgModule({
imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
exports: [RouterModule]
})
- If you have nested module then perform the 1st step in that particular module
In my case, the 2nd method solved my issue.
Hope this will help you
Solution 10 - Angular
I received the error because the component I was using wasn't registered in the declarations: [] section of the module.
After adding the component the error went away. I would have hoped for something less obscure than this error message to indicate the real problem.
Solution 11 - Angular
If you are making your own module then add CommonModule in imports in your own module
Solution 12 - Angular
Add the component to your app.module
import { ModalComponent } from './modal/modal.component';
@NgModule({
declarations: [ModalComponent],
entryComponents: [ModalComponent],
}),
providers: [
],
bootstrap: [AppComponent]
})
Solution 13 - Angular
For Angular 10:
- Add BrowserModule to the imports of your routes module.
- Make sure that you added the component that not working to the app module declarations.
Failing to do step 2 will trigger this error!
Make sure to RESTART ng serve !!!
Solution 14 - Angular
Just in case someone still facing an error after trying to import CommonModule
, try to restart the server. It surprisingly work
Solution 15 - Angular
So please make sure
-
No syntax error in directives
-
Browser (in App Module) and Common (in other/child) Modules are imported (Same what Günter Zöchbauer mentioned above)
-
If you've routes in the application then route module should be imported in App Module
-
All the routed component's Module are also imported in App Module, for eg: app-routing.module.ts is as follows:
const routes: Routes = [
{path: '', component: CustomerComponent},
{path: 'admin', component: AdminComponent}
];
Then App module must imports modules of CustomerComponent and AdminComponent in @NgModule().
Solution 16 - Angular
A lot of answers seem to converge by importing CommonModule
in other(new/custom) modules.
This step only isn't enough in all situations.
The full solution consist in two steps:
- Make directives
NgIf
,NgFor
etc visible to your project. - Reassemble everything in a correct way in the main component (
app.module.ts
)
Point 1
BrowserModule
in main module seems to be enough for having access to NgFor
.
Angular Documentation stands it here: .
> CommonModule Exports all the basic Angular directives and pipes, such as NgIf, NgForOf, DecimalPipe, and so on. Re-exported by BrowserModule,
See also accepted answer here: https://stackoverflow.com/questions/49662864/commonmodule-vs-browsermodule-in-angular
Point 2
The only changes needed (in my case) are the followings:
- import Module
OtherModule
- import Component
OtherComponent
- ng build (important!)
- ng serve
app.module.ts
@NgModule({
imports: [
BrowserModule,
OtherModule
],
declarations: [OtherComponent, AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
other.html
<div *ngFor='let o of others;'>
</div>
other.component.ts
@Component({
selector: 'other-component',
templateUrl: './other.html'
})
export class OtherComponent {
}
app.module.ts
@NgModule({
imports: [],
providers: []
})
export class OtherModule{
}
Solution 17 - Angular
After using correct syntax in all of your code, please see if you have mentioned your component in the declarations of your angular module. Something like below:
@NgModule({ declarations: [ AppComponent, YourComponent ],
Solution 18 - Angular
Custom Module Needs common module
import { CommonModule } from "@angular/common";
@NgModule({
imports: [
CommonModule
]
})
Solution 19 - Angular
I had the same error but I had the CommonModule imported. Instead I left a comma where it shouldn't be because of copy/paste when splitting a module:
@NgModule({
declarations: [
ShopComponent,
ShoppingEditComponent
],
imports: [
CommonModule,
FormsModule,
RouterModule.forChild([
{ path: 'shop', component: ShopComponent }, <--- offensive comma
])
]
})
Solution 20 - Angular
app.module.ts fixed and changed to: import the BrowserModule in your app module
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
Solution 21 - Angular
I have encountered a similar error (*ngIf
) even if all my imports were OK and the component was rendered without any other error + routing was OK.
In my case AppModule
was not including that specific module. The strange thing is that it did not complain about this, but this might be related with how Ivy works with ng serve
(kind of loads modules according to routing, but its dependencies are not considered).
Solution 22 - Angular
I had the same problem, even though I had imported "BrowserModule" and "CommonModule" in "module.ts" it didn't work, my error was, not adding in "NgModule.declarations" my Component.
@NgModule ({
declarations: [
Your_Component // here
]
})
Solution 23 - Angular
if you already imopted (BrowserModule, CommonModule, FormsModule) and its still not working
then all you have to do is check if the component that has the error is declared in the module
Solution 24 - Angular
When use "app-routing.module" we forget import "CommonModule". Remember to import!
import { CommonModule } from "@angular/common";
@NgModule({ imports: [ CommonModule]})
Solution 25 - Angular
I am started on Angular8 base live project got the above issue but When use "app-routing.module" we forget import "CommonModule". Remember to import!
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
]})
It will solve your error.
Solution 26 - Angular
I had a problem because of ** instead *
*ngFor="let ingredient of ingredients"
**ngFor="let ingredient of ingredients"
Solution 27 - Angular
For future reference, I'm doing some unit testing on Angular 12 and ran into this.
My issue was that I was using the ng bootstrap library and testing a method that was creating a new modal with NgbModal
.
I was getting these warnings because I had forgotten to import the component being created by the popup.
I did not need to import FormsModule
, CommonModule
, or BrowserModule
.
So, if you run into these errors make sure that the component you're trying to create an instance of is listed in the imports.
Solution 28 - Angular
If you have module implementation, then you must import the component and set the component in the declaration
Good Luck on your coding :)
Solution 29 - Angular
Just had the same issue after modifying a couple of components. There was no syntax error and all modules were imported, but a restart of the server fixed the issue. The error occurred in a component, that was added several dozen successful commits ago.
Just in case someone else experiences the same issue.
Solution 30 - Angular
I think my scenario is a rare case, but I will answer anyway.
I didn't have any syntax errors, I imported BrowserModule, I restated my IDE (VS Code), but I still got red lines in my template because I used *ngFor
.
I happened because I was using an extension, Angular Language Service
, but it was quite old. After updating it, the error stopped appearing.
Solution 31 - Angular
This error can also be thrown when the ngFor
syntax isn't written correctly, in my case I had:
And it got fixed by using the following syntax:
Solution 32 - Angular
I had a problem because of blank space in the json data.
Solution 33 - Angular
In my case, the problem was, that I used const
instead of let
inside the *ngFor
.
Solution 34 - Angular
A bit late to the party, but I recently ran into this situation. This answer didn't solve my problem.
My premises
-
I was using a custom directory structure for the project. The offending component sits inside the
components
directory. -
The component where I found a similar error was created using CLI schematics with the
--skip-import
optionnpx ng g c --skip-import ../components/my-component
Solution
Because I used the --skip-import
(see note) option, I found that my component was not added to the declarations
array in my module. Adding the component to the same solved the problem.
Note : Well,you can't create the component outside the app directory without this.
Solution 35 - Angular
In my case, I already had CommonModule included in my shared module & the feature module where the component was to be used, but in my case I saved some files while server was starting (compiling) maybe that's why it did not took registry of included modules properly
=> I restarted my local server it solved the problem for me
Solution 36 - Angular
For me, what solved the problem was to do a git clone of my project and run (as usual):
npm install