web-dev-qa-db-fra.com

Erreur: 'app-header' n'est pas un élément connu: Angular 2

Voici ma structure de dossiers.

    app
    - common
         - header
           header.component.css
           header.component.html
           header.component.ts
        - footer
           footer.component.css
           footer.component.html
           footer.component.ts
    - index
      index.component.css
      index.component.ts
      index.component.html
      index.module.ts
   - lessons
     lesson1(another folder)
     lesson2(folder)
     lesson.module.ts   

    app.component.css
    app.component.ts
    app.component.html
    app.module.ts

J'ai importé le composant d'en-tête et de pied de page, index.module, leçon.module dans app.module et utilisé

<app-header></app-header>
<app-navbar></app-navbar>

dans index.component.html, lesson1.component.html, lesson2.component.html.

Mais j'obtiens "app-header" n'est pas une erreur d'élément connue. Quelqu'un peut-il m'aider à résoudre cette erreur?

Cela fonctionne bien si j'inclus des composants d'en-tête et de pied de page directement dans index.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import * as $ from 'jquery';

import { AppComponent } from './app.component';

import { HeaderComponent } from './common/header/header.component';
import { FooterComponent } from './common/footer/footer.component';

import { IndexModule } from './index/index.module';
import { LessonModule } from './index/lesson.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    IndexModule,
  ],

  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

 }

index.component.html

<app-header></app-header>   <app-navbar></app-navbar>

index.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { IndexComponent } from './index.component';
import { IndexRoutingModule } from './index-routing.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    IndexRoutingModule
  ],
  declarations: [
    IndexComponent
  ]
})

export class IndexModule { }

leçon.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { Lesson1Component } from './lesson1.component';
import { Lesson2Component } from './lesson2.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    IndexRoutingModule
  ],
  declarations: [
    IndexComponent
  ]
})

export class IndexModule { }
angularangular2-modules
6
Green Computers

quel est votre module bootstrap qui charge votre application?

si vous voulez déclarer des composants dans un module et les utiliser dans un autre module, vous devez les export afin que lorsque vous importerez le module dans un autre module, il comprendra que ceux-ci seront utilisés à partir d'un autre module

donc dans votre app.module.ts les déclarer et également les exporter pour que le module d'index comprenne qu'ils proviennent d'autres modules.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    IndexModule,
  ],

  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
  ],

exports: [
      HeaderComponent,
    FooterComponent,
],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

 }

et maintenant importer l'app.module dans votre module d'index

@NgModule({
  imports: [
    AppModule,
    CommonModule,
    FormsModule,
    HttpModule,
    IndexRoutingModule
  ],
  declarations: [
    IndexComponent
  ]
})

export class IndexModule { }

Je dirais que votre module d'application est un module bootstrap et créez un module partagé et déclarez tous les composants, les tuyaux, la directive et les exportez. Dans votre module d'application, importez le module partagé et utilisez tous les Composants.

8
Aniruddha Das

Vous avez importé et déclaré le composant d'en-tête dans app.module mais l'utilisez dans index.module où ils ne sont pas "reconnus".

Déplacez-les vers index.module

import { HeaderComponent } from './common/header/header.component';
...
declarations: [
    HeaderComponent,
....
4
Vega