Não é possível vincular a 'ngForOf', pois não é uma propriedade conhecida de 'tr' (versão final)

Estou usando a versão final do Angular2 (2.1.0). Quando quero exibir uma lista de empresas, recebi esse erro.

em file.component.ts:

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

em file.component.html:

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

Adicionar BrowserModulepara imports: []nos @NgModule()se é o módulo de raiz ( AppModule), caso contrário o CommonModule.

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

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

No meu caso, o problema era que meu colega de equipe mencionou *ngfornos modelos em vez de *ngFor. Estranho que não haja erro correto para lidar com esse problema (no Angular 4).

Você precisa importar 'CommonModule' no módulo em que você está usando essas diretivas internas, como ngFor, ngIf etc.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Coisas para lembrar:

Quando módulos personalizados são usados ​​(outros módulos que não o AppModule), é necessário importar o módulo comum nele.

yourmodule.module.ts

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

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

Se você estiver criando seu próprio módulo, adicione CommonModule nas importações em seu próprio módulo

Isso também pode acontecer se você não declarar um componente de rota no seu módulo de recurso. Então, por exemplo:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Observe que o ViewComponent não está na matriz de declarações, enquanto deveria estar.

Módulo personalizado Precisa de um módulo comum

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

@NgModule ({importações: [CommonModule]})

Quando usamos "app-routing.module", esquecemos de importar "CommonModule". Lembre-se de importar!

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

Eu tive o mesmo erro, mas eu tinha o CommonModule importado. Em vez disso, deixei uma vírgula onde não deveria estar por causa da cópia / colar ao dividir um módulo:

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

app.module.ts corrigido e alterado para: importe o BrowserModule no seu módulo de aplicativo

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

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

Eu estava recebendo o mesmo erro. Você pode corrigir um destes métodos:

1. Se você não possui nenhum módulo aninhado

   uma. Importe o CommonModule no seu módulo App

   b. Importe seu componente para o qual você está adicionando * ngFor no módulo App , defina nas declarações

// 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. Se você estiver usando o arquivo de módulo separado para roteamento, importe o CommonModule no seu módulo de roteamento. Caso contrário, importe o CommonModule no seu módulo de aplicativo.

// 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. Se você tiver um módulo aninhado, execute a 1ª etapa nesse módulo específico

No meu caso, o segundo método resolveu meu problema.
Espero que isso ajude você

Para mim, o problema era que eu não importei o módulo personalizado HouseModuleno meu app.module.ts. Eu tinha as outras importações.

Arquivo: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Leitores futuros

Verifique cada um dos seguintes:

• O componente é declarado em um único módulo angular
• Assegure-se de ter import { CommonModule } from '@angular/common';
• Reinicie o IDE / editor

Eu sou iniciado no projeto ao vivo da base Angular8, obtive o problema acima, mas ao usar "app-routing.module", esquecemos de importar "CommonModule". Lembre-se de importar!

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

@NgModule({
  imports: [
    CommonModule
]})

Isso resolverá o seu erro.

Este problema aparece quando o uso de rotas, podemos exibir o conteúdo estático de qualquer módulo, mas ao tentar usar a funcionalidade ani como * ngIg não funciona, por exemplo, é necessário trabalhar como, por exemplo, @Ruben Szeker, seria necessário adicionar o componente em app.module.ts nas importações [], para finalizar o fechamento ou eliminar a execução da atualidade do servidor e executar novamente a execução do serviço, resolverá o problema. se isso não funcionar para você, tente outra maneira.

Sinto muito pelo meu inglês ruim.

Eu tive um problema por causa de ** em vez *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Eu encontrei um erro semelhante ( *ngIf) mesmo que todas as minhas importações estivessem OK e o componente tenha sido processado sem nenhum outro erro + o roteamento estava OK.

No meu caso, AppModulenão estava incluindo esse módulo específico. O estranho é que não se queixou disso, mas isso pode estar relacionado à maneira como o Ivy trabalha ng serve(tipo de carregamento de módulos de acordo com o roteamento, mas suas dependências não são consideradas).

Acabei de perder ~ 1h com esse erro, em apenas uma página específica. Tentei todas as respostas aqui, mas finalmente a solução foi reconstruir tudo com ng, o problema simplesmente desapareceu ...

Então, por favor, certifique-se

1. Nenhum erro de sintaxe nas diretivas

2. Os módulos Browser (no App Module) e Common (em outro / filho) são importados (o mesmo que Günter Zöchbauer mencionou acima)

3. Se você possui rotas no aplicativo, o módulo de rota deve ser importado no Módulo de Aplicativo

4. Todo o módulo do componente roteado também é importado no App Module, por exemplo: app-routing.module.ts é o seguinte:

   rotas const: Routes = [

   {path: '', component: CustomerComponent},

   {caminho: 'admin', componente: AdminComponent}

   ];

Em seguida, o módulo App deve importar os módulos CustomerComponent e AdminComponent em @NgModule ().

Mesmo que eu tenha enfrentado o mesmo problema, tentei todas as respostas por aqui, mas uma simples alteração me ajudou a resolver esse problema, em vez de incluir * ngFor na trtag, incluí-a na tbodytag. Espero que ajude alguém.

<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 no módulo filho e no componente