错误:’app-header’不是已知元素:Angular 2
下面是我的文件夹结构.
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 我已导入标题& app.module中的页脚组件,index.module,lesson.module并使用 <app-header></app-header> <app-navbar></app-navbar> 在index.component.html,lesson1.component.html,lesson2.component.html中. 但我得到’app-header’不是已知的元素错误.有人可以帮我解决这个错误. 如果我直接在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,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,declarations: [ IndexComponent ] }) export class IndexModule { } 解决方法
什么是你的bootstrap模块加载你的应用程序?
如果你想在一个模块中声明组件并在另一个模块中使用它们,你需要将它们导出,这样当你将模块导入另一个模块时,它会理解这些将从另一个模块中使用 所以在你的app.module.ts声明并导出它们,以便索引模块应该理解这些来自其他模块. @NgModule({ imports: [ BrowserModule,exports: [ HeaderComponent,bootstrap: [AppComponent] }) export class AppModule { } 现在导入索引模块中的app.module @NgModule({ imports: [ AppModule,CommonModule,declarations: [ IndexComponent ] }) export class IndexModule { } 我会说你的app模块作为bootstrap模块并创建一个共享模块并声明所有组件,管道,指令并导出它们.并在您的应用程序模块中导入共享模块并使用所有组件. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |