*ngFor 不能绑定到“ngForOf”，因为它不是“div”的已知属性。

Question

I have been using NGFor for a long time, but it seems that suddenly in this new application I am getting

Can't bind to 'ngForOf' since it isn't a known property of 'div'.'

When looking it up online it is showing older version of Angular, which is odd. Likewise It is telling me to add BrowserModule in the imports which is generally a normal thing. I currently am working on a App with Routing, so the App uses the RouterModule to fetch the right page. In the App module, i have it as an import, along with BrowserModule.

EDIT I ended up doing a *ngFor loop in my base page, so it seems to work. I am thinking the issue happens from the concept of the route? I access it in my RouterModule by:

{path: 'industry/manufacturing', component: ManufacturingComponent},

Is accessing by route requiring me to add CommonModule to the RouterModule?

My Angular specs are:

Angular CLI: 10.0.8
Node: 14.12.0
OS: darwin x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cdk                      8.2.3
@angular/cli                      10.0.8
@angular/material                 8.2.3
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

<div *ngFor="let mat of materials">
  {{mat.name}}: {{mat.quantity}}
</div>

where in the ts code i define it as:

materials = [{"name": "foo", "quantity": 5}];

My app.module looks like:

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

AppRoutingModule also is just a simple:

const routes: Routes = [
  {path: '', component: MainComponent},
  {path: 'industry/manufacturing', component: ManufacturingComponent},
  {path: '**', component: PageNotFoundComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I am not sure what is going on that is out of the ordinary here.

Answer 1

I think you are missing an import of CommonModule In your imports, unless its declared some where else that I cant see. Edit: Your app module has BrowserModule which includes it, but it doesnt know about your components, Either add CommonModule to your RoutingModule (not recommended, its not the router job to handle who has what), or declare the components in your AppModule to let him know which components uses his imports. Please refer to https://stackblitz.com/angular/qypdxgpopxp?file=src%2Fapp%2Fadmin%2Fadmin.module.ts for a wide example of routing and modules

Answer 2

Try these steps and see.

1. Import CommonsModule
2. Re run ng serve
3. Perform an npm install
4. Try going to the.ts file of the Template you're placing the *ngFor and re save the.ts file. I find this solves a lot of my template related issues