No se puede enlazar a 'ngForOf' ya que no es una propiedad conocida de 'tr' (versión final)

Estoy usando la versión final de Angular2 (2.1.0). Cuando quiero mostrar una lista de empresas, aparece este error.

en file.component.ts:

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

en file.component.html:

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

Añadir BrowserModulea imports: []en @NgModule()si es el módulo de raíz ( AppModule), de lo contrario el CommonModule.

// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';

import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})

En mi caso, el problema fue que mi compañero de equipo mencionó *ngforen plantillas en lugar de *ngFor. Es extraño que no haya un error correcto para manejar este problema (en Angular 4).

Debe importar 'CommonModule' en el módulo donde está utilizando estas directivas integradas como ngFor, ngIf, etc.

import { CommonModule } from "@angular/common";


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Cosas para recordar:

Cuando se utilizan módulos personalizados (módulos distintos de AppModule), es necesario importar el módulo común en él.

yourmodule.module.ts

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})

Si está creando su propio módulo, agregue CommonModule en las importaciones en su propio módulo

Esto también puede suceder si no declara un componente de ruta en su módulo de funciones. Así por ejemplo:

feature.routing.module.ts:

...
    {
        path: '',
        component: ViewComponent,
    }
...

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Observe que ViewComponent no está en la matriz de declaraciones, cuando debería estarlo.

Módulo personalizado Necesita módulo común

importar {CommonModule} desde "@ angular / common";

@NgModule ({importaciones: [CommonModule]})

Cuando usamos "app-routing.module" nos olvidamos de importar "CommonModule". ¡Recuerda importar!

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})

Tuve el mismo error pero tenía el CommonModule importado. En su lugar, dejé una coma donde no debería estar debido a copiar / pegar al dividir un módulo:

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})

app.module.ts corregido y cambiado a: importar el BrowserModule en el módulo de su aplicación

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule, 
  ],     
  providers: [],
  bootstrap: [AppComponent]
})

Recibía el mismo error, puede solucionarlo mediante uno de estos métodos:

1. Si no tiene ningún módulo anidado

   a. Importa CommonModule en tu módulo de aplicación

   si. Importe su componente donde está agregando * ngFor en el módulo de la aplicación , defina en declaraciones

// 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. Si está utilizando el archivo de módulo separado para el enrutamiento, entonces importe el CommonModule en su módulo de enrutamiento o, de lo contrario, importe el CommonModule en el módulo de su aplicación

// 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]
})

2. Si tiene un módulo anidado, realice el primer paso en ese módulo en particular

En mi caso, el segundo método resolvió mi problema.
Espero que esto te ayudará

Para mí, el problema fue que no importé el módulo personalizado HouseModuleen mi app.module.ts. Tenía las otras importaciones.

Archivo: app.module.ts

import { HouseModule } from './Modules/house/house.module';

@NgModule({
  imports: [
    HouseModule
  ]
})

Lectores futuros

Marque cada uno de los siguientes:

• El componente se declara en un módulo angular ÚNICO
• Asegúrate de tener import { CommonModule } from '@angular/common';
• Reinicie el IDE / editor

Comencé con el proyecto en vivo base de Angular8 que obtuve el problema anterior, pero cuando usamos "app-routing.module" nos olvidamos de importar "CommonModule". ¡Recuerda importar!

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
]})

Resolverá tu error.

Este problema aparece cuando usamos Rutas, podemos mostrar el contenido estático de cualquier módulo, pero cuando intentamos usar una funcionalidad como * ngIg no funciona, por trabajo como por ejemplo @Ruben Szeker, es necesario agregar Component en app.module.ts en las importaciones [], para finalizar, cerrar o matar la ejecución actual del servidor y volver a intentar ejecutar el servicio, se resolverá el problema. Si esto no funciona para usted, puede intentarlo de otra manera.

Lo siento por mi mal ingles.

Tuve un problema debido a ** en su lugar *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

He encontrado un error similar (*ngIf ) incluso si todas mis importaciones estaban bien y el componente se procesó sin ningún otro error + el enrutamiento estaba bien.

En mi caso AppModuleno incluía ese módulo específico. Lo extraño es que no se quejó de esto, pero esto podría estar relacionado con cómo trabaja Ivy ng serve(tipo de módulos de carga según enrutamiento, pero no se consideran sus dependencias).

Perdí ~ 1h en este error, en una sola página específica. Probé todas las respuestas aquí, pero finalmente la solución fue reconstruir todo con ng, el problema simplemente desapareció ...

Así que por favor asegúrate

1. Sin error de sintaxis en las directivas

2. El navegador (en el módulo de la aplicación) y los módulos comunes (en otro / niño) se importan (lo mismo que Günter Zöchbauer mencionó anteriormente)

3. Si tiene rutas en la aplicación, el módulo de ruta debe importarse en el Módulo de la aplicación

4. Todos los módulos del componente enrutado también se importan en el módulo de la aplicación, por ejemplo: app-routing.module.ts es el siguiente:

   rutas const: Rutas = [

   {ruta: '', componente: CustomerComponent},

   {ruta: 'admin', componente: AdminComponent}

   ];

Luego, el módulo de la aplicación debe importar módulos de CustomerComponent y AdminComponent en @NgModule ().

Incluso me enfrenté al mismo problema, probé todas las respuestas aquí, pero un cambio simple me ayudó a resolver este problema, en lugar de incluir * ngFor en la tretiqueta, lo incluí en la tbodyetiqueta. Espero que ayude a alguien.

<tbody *ngFor="let product of products; let i=index">
        <tr >
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.quantity}}</td>
            <td>
                <button type="button" >Update</button>
                <button type="button" (click)="crudService.delete(product.id)">Remove</button>
            </td>
        </tr>
    </tbody>

importar CommonModule tanto en el módulo secundario como en el componente