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"
  }
}

[krakatoa]

au lieu de :

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>

met :

Code :

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

{{gridDataProduct|json}}

ça donne quoi ?

[pcouas]

AIE

core.js:6456 ERROR Error: Uncaught (in promise): Error: NG0302: The pipe 'json' could not be found!. Find more at https://angular.io/errors/NG0302

Le CommonModule est dans mon MSharedModule importé dans mon module MXXContactModule qui utilise mon component et dans mon package.json j'ai bien @angular/common

[krakatoa]

tu as du supprimer des packages ou des fichiers dans node_modules disparaissent ....

(1)
supprime le dossier node_module
ensuite
npm i


(2)
si ça marche pas

recréer un projet angular
ng new .........
et transfert le dossier /src

[pcouas]

Bjr
Même avec un nouveau projet j'ai le soucis
J'ai deux versions d'un nouveau projet en Angular12, l'une ok et l'autre un peu plus avancé, il ne trouve plus la librairie
Dans mon module shared, j'ai déclaré bcp de librairie Kendo, mon pb est peut etre la

[krakatoa]

si tu n'a pas de raison particuliere privilégie angular material

sinon copie de projet
npm remove ...le package kendo....
supprimer le code qui l'utilise
et constate si pb ou pas ?