ionic5 新建组件提示 ‘app-footer‘ is not a known element

布满荆棘的人生 2022-12-08 15:51 264阅读 0赞

新建footer组件在home组件里调用的时候提示：  
'app-footer' is not a known element: 1. If 'app-footer' is an Angular component, then verify that it is part of this module. 2. If 'app-footer' is a Web Component then add 'CUSTOM\_ELEMENTS\_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

![20200920222400929.png][]

解决办法：

1.将 FooterPageModule 里的 RouterModule 去掉，如果不是将footer组件做为单独的页面的话

2.加个 export 导出 footer 的 page：exports: \[FooterPage\]

3.home.module.ts导入 FooterPageModule

**footer.module.ts**

import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { IonicModule } from '@ionic/angular';
    import { FormsModule } from '@angular/forms';
    import { FooterPage } from './footer.page';
    
    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
      ],
      declarations: [FooterPage],
      exports: [FooterPage]
    })
    export class FooterPageModule { }

**home.module.ts**

import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { IonicModule } from '@ionic/angular';
    import { FormsModule } from '@angular/forms';
    import { HomePage } from './home.page';
    import { RouterModule } from '@angular/router';
    import { HeaderPageModule } from '../header/header.module';
    import { FooterPageModule } from '../footer/footer.module';
    
    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        HeaderPageModule,
        FooterPageModule,
        RouterModule.forChild([
          {
            path: '',
            component: HomePage,
          }
        ])
      ],
      declarations: [HomePage]
    })
    export class HomePageModule {}

[20200920222400929.png]: /images/20221123/634bbacb57dd45f996c2e2b09ae99d1c.png