Below is my folder structure.
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
I have imported header & footer component, index.module, lesson.module in app.module and used
<app-header></app-header>
<app-navbar></app-navbar>
in index.component.html, lesson1.component.html, lesson2.component.html.
But I get 'app-header' is not a known element error. Can somebody help me to resolve this error?
It works well if I include header and footer components directly in 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 { }
lesson.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 { }
what is your bootstrap module which loads your application?
if you want to declare components in one module and use them in another module you need to export
them so that when you will import the module in another module, it will understand that these will be used from another module
so in your app.module.ts
declare and also export them so that the index module should understand that these are from other modules.
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
IndexModule,
],
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
],
exports: [
HeaderComponent,
FooterComponent,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
and now import the app.module in your index module
@NgModule({
imports: [
AppModule,
CommonModule,
FormsModule,
HttpModule,
IndexRoutingModule
],
declarations: [
IndexComponent
]
})
export class IndexModule { }
I would say make your app module as a bootstrap module and make a shared module and declare all component, pipes, directive and export them. and in your app module import the shared module and use all the components.