Discussion :

[pcouas]

Bonsoir


J'ai l'erreur suivante

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

J'ai enleve tout ce que je pouvais et plus rien dans le projet mais toujours l'erreur
J'ai en Angular12
app.module
core.module
shared.module
xxcontact.module
xxcontact.component
xxcontact.component.html


Je ne vois pas ou j'ai M..... le CommonModule est bien dans le sous Module ???
J'avais fait un test dans le app.component d'une premiere version cela fonctionnait, et j'ai un autre bout de code quasi identique sauf pour le routing et lui il est Ok


Merci de votre aide


app.module

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
import {AppComponent} from './app.component';
import {MSharedModule} from './shared/shared.module';
 
import {TranslateService} from '@ngx-translate/core';
 
import {MCoreModule} from './core/core.module';
import {AppRoutingModule} from './app-routing.module';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    MCoreModule,
    MSharedModule,
    AppRoutingModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [],
  bootstrap: [AppComponent]
 
})
export class AppModule {
 }

core.module

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import {NgModule, Optional, SkipSelf} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
 
 
 
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    HttpClientModule
    ],
  providers: [
  ]
})
 
 
export class MCoreModule {
  constructor( @Optional() @SkipSelf() parentModule: MCoreModule) {
    if (parentModule) {
      throw new Error('CoreModule has already been loaded. You should only import Core modules in the AppModule only.');
    }
  }
 
}

shared.module

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import {TranslateModule} from "@ngx-translate/core";
import {RouterModule} from "@angular/router";
 
@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
    ReactiveFormsModule
  ],
  declarations: [],
  providers: [],
  exports: [
    CommonModule,
    RouterModule,
    TranslateModule,
    ReactiveFormsModule
  ]
})
 
export class MSharedModule { }

xxcontact.module

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule} from '@angular/forms';
import { MSharedModule } from '../../shared/shared.module';
import { RouterModule, Routes } from '@angular/router';
import { XxContactComponent } from './xxcontact.component';
 
const routes: Routes = [{ path: '', component:  XxContactComponent }];
 
//par rapport a celui qui fonctionne la route est sortie du composant ICI
 
@NgModule({
  declarations: [
    XxContactComponent
  ],
  imports: [
    HttpClientModule, FormsModule, MSharedModule, RouterModule.forChild(routes)
  ],
 
  exports: [
    ]
})
 
export class MXXContactModule { }

xxcontact.component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';
import { products } from './xxproducts';
 
 
@Component({
  selector: 'my-app',
  templateUrl: 'xxcontact.component.html'
})
 
export class XxContactComponent {
  public gridDataProduct: any[] = products;
}

le dernier le html avec le *ngfor xxcontact.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul>
  <li *ngFor="let g1 of gridDataProduct">
    {{ g1.ProductID }} / {{ g1.ProductName }}
  </li>
</ul>

le package.json

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{
  "name": "from2021SANSKENDO",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "12.0.2",
    "@angular/common": "12.0.2",
    "@angular/compiler": "12.0.2",
    "@angular/core": "12.0.2",
    "@angular/forms": "12.0.2",
    "@angular/platform-browser": "12.0.2",
    "@angular/platform-browser-dynamic": "12.0.2",
    "@angular/router": "12.0.2",
    "@ng-bootstrap/ng-bootstrap": "9.1.1",
    "@ngx-translate/core": "^13.0.0",
    "@progress/kendo-theme-default": "^4.38.1",
    "bootstrap": "^5.0.1",
    "core-js": "2.6.12",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "tslib": "1.14.1",
    "web-animations-js": "2.3.2",
    "zone.js": "~0.11.4"
  },
  "scripts": {
    "ng": "ng",
    "starto": "ng serve",
    "start": "ng serve --port 4402",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.1",
    "@angular/cli": "~12.0.1",
    "@angular/compiler-cli": "~12.0.1",
    "@angular/localize": "^12.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.2.4"
  }
}