Discussion :

[Michel38]

Bonjour à tous,

Je débute en Angular.
J'essaie de suivre plusieurs tuto pour apprendre comment ça fonctionne.
J'en suis arrivé à un qui me pose un problème. Je n'arrive pas à comprendre.
C'est vraiment super simple pourtant.
Tout d'abord mon environnement :
Angular CLI: 17.3.8
Node: 18.20.3
Package Manager: npm 10.8.1

Ensuite, j'ai créé 2 modules, core et shared.
J'ai créé un composant header dans core/components
J'ai déclaré le HeaderComonent dans core.module.ts :

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
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './components/header/header.component';
 
@NgModule({
  declarations: [
    HeaderComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    HeaderComponent
  ]
})
export class CoreModule { }

J'ai importer mon module core dans le app.module.ts :

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
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CoreModule
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Ensuite, dans le app.component.html je rajoute mon header :

Code html :

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

<app-header></app-header>

en quand j'essaie de faire un build, j'ai un message qui me dit ceci :

X [ERROR] NG8001: 'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]


src/app/app.component.html:0:0:
0 │
╵ ^


Error occurs in the template of component AppComponent.


src/app/app.component.ts:5:15:
5 │ templateUrl: './app.component.html',
╵ ~~~~~~~~~~~~~~~~~~~~~~

J'ai suivi le tuto vraiment au caractère près, je l'ai recommencé plusieurs fois, et j'arrive toujours au même résultat...
Si quelqu'un a une idée...

Michel

[gabi7756]

Bonjour,
Si je me trompe pas tu dis vouloir utiliser ton header component dans ton app module
Sauf que tu n'as pas déclaré le composant HeaderComponent dans le module AppModule.

Code angular :

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
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CoreModule
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Il faudrait faire un truc du style ?

Code angular :

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
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { HeaderComponent } from './core/components/header/header.component'; // Ajout
 
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent // Ajout
  ],
  imports: [
    CoreModule
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

J'espère ne pas être à côté de la plaque
Merci d'avance pour ton retour
Gabi

[Michel38]

Merci de ta réponse Gabi,

En fait, ce que je veux faire, c'est afficher mon header dans le composant principal, dans le HTML, donc app.component.html.

Le composant header est dans le répertoire core.
Si je n'ai pas déclaré mon HeaderComponent dans le AppModule, c'est parce que je l'ai déclaré dans le CoreModule, et que dans le AppModule, je fais un import du CoreModule.

Et d'ailleurs, si je rajoute mon HeaderComponent dans le AppModule, l'import de CoreModule est en erreur.

This import contains errors, which may affect components that depend on this NgModule.(-996002)

(alias) classCoreModule
importCoreModule

Je ne suis pas sûr de bien maîtriser l'utilisation des modules.
Pour moi, si je déclare un composant dans un module B, et que dans le module A, je fais un import de B, théoriquement, je devrais pouvoir utiliser le composant dans le composant principal.
Mais peut être que je me trompe..


Michel

[Michel38]

Bon, et bien à force de tout essayer. J'ai fini par trouver ce qui n'allait pas.
Ce n'était évidemment pas du tout lié à la structure de mes modules et composants.
Je suis quand même rassuré, car j'avais je pense tout essayé.

Le problème venait du CLI qui m'a généré de la merde. (du moins, mes faibles connaissances en la matière me font dire que c'est de la merde... mais peut être qu'il y a une raison qui m'aura échappé !!!)

Toujours est-il que le CLI m'avait ajouté dans le main.ts ceci :

Code :

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

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Et j'ai recopié d'un autre projet que j'avais fait avant :

Code :

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

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

Et depuis que j'ai changé ça, mais je ne comprends pas la différence, et bien tout marche.
Va comprendre !!

Michel