Can t bind to ngForOf since it isn t a known property of tr final release

Question

I m using Angular2 Final release  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      lt tbody gt     lt tr  ngFor  let item of companies  let i  index  gt        lt td gt   i   lt  td gt        lt td gt   item name   lt  td gt     lt  tr gt   lt  tbody gt

User · Answer

There can be any possible reason   Your module does not have CommonModule in imports   Your component  where you are using  ngFor  is not a part of any module  You might have syntax error in  ngFor i e    ngFor or  ngfor etc  typo  If everything seems fine then restart your IDE i e  VS Code  IntelliJ etc

User · Answer

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

User · Answer

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

User · Answer

Just in case someone still facing an error after trying to import CommonModule  try to restart the server  It surprisingly work

User · Answer

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

User · Answer

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  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  lt div  ngFor  let o of others   gt    lt  div gt   other component ts  Component       selector   other-component       templateUrl     other html     export class OtherComponent      app module ts  NgModule       imports          providers        export class OtherModule

User · Answer

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

User · Answer

If you are making your own module then add CommonModule in imports in your own module

User · Answer

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

User · Answer

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

User · Answer

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     lt --- offensive comma

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

When use  app-routing module  we forget import  CommonModule   Remember to import   import   CommonModule   from   angular common    NgModule    imports    CommonModule

User · Answer

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

User · Answer

For me  what solved the problem was to do a git clone of my project and run  as usual   npm install

User · Answer

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

User · Answer

Custom Module Needs common module import   CommonModule   from  quot  angular common quot      NgModule     imports        CommonModule

User · Answer

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

User · Answer

I had a problem because of    instead     ngFor  let ingredient of ingredients     ngFor  let ingredient of ingredients

[angular] Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)

Examples related to angular

Examples related to angular2-template