如何解析'ion-item'不是离子中的已知元素

Question

我正在用ionic构建一个应用程序，我注意到当我想将我的应用程序转换为apk时，像ion-header, ion-title, ion-list etc这样的ionic元素会停止在模态中工作。它适用于除模式之外的其他页面

这是comment.module.ts 的代码

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import  { NgxEmojModule } from 'ngx-emoj';
import { TimeAgoPipe } from 'time-ago-pipe';
import { CommentPageRoutingModule } from './comment-routing.module';
import { CommentPage } from './comment.page';
import { PipesModule } from '../../pipes/pipes.module';
@NgModule({
imports: [
CommonModule,
NgxEmojModule,
PipesModule,
FormsModule,
IonicModule,
CommentPageRoutingModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [
CommentPage,
TimeAgoPipe]
})
export class CommentPageModule {}

我在应用程序模块和页面模块中都添加了CUSTOM_ELEMENTS_SCHEMA，但它并不只是起作用。

这是评论page.html

<ion-header class="ion-no-border" *ngIf="!isLoading">
<ion-toolbar>
<ion-title class="centerAM">{{no_comm | shortNumber}} comment{{no_comm>1?'s':''}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
....

当我试图将其转换为apk 时，我得到了这个

src/app/modal/comment/comment.page.html:1:1 - error NG8001: 'ion-header' is not a known element:
1. If 'ion-header' is an Angular component, then verify that it is part of this module.
2. If 'ion-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
1 <ion-header class="ion-no-border" *ngIf="!isLoading">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/modal/comment/comment.page.ts:7:16
7   templateUrl: './comment.page.html',
~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component CommentPage.
src/app/modal/comment/comment.page.html:2:2 - error NG8001: 'ion-toolbar' is not a known element:
1. If 'ion-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'ion-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
2  <ion-toolbar>

这是我调用模式的代码

async CommentModal(id) {
const modal = await this.modalController.create({
component: CommentPage,
componentProps:{id},
swipeToClose: true,
cssClass: 'comment-modal'
});
await modal.present();
return 
}

这是评论页面.html页面

<ion-header class="ion-no-border" *ngIf="!isLoading">
<ion-toolbar>
<ion-title class="centerAM">{{no_comm | shortNumber}} comment{{no_comm>1?'s':''}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ng-container *ngIf="isLoading; else loadTemp;">
.....
</ng-container>
<ng-template #loadTemp>     
<ion-item *ngFor="let comm of comms" lines="none">
....
</ion-item>
</ng-template>
</ion-content>
<ion-footer *ngIf="isLoggedIn">
<ion-toolbar>
<ng-container *ngIf="showEm">
....
</ng-container>
<ion-grid>
<ion-row>
.....
</ion-row>
</ion-grid> 
</ion-toolbar>
</ion-footer>

请问我在做什么，这是错误的

Answer 1

作为延迟加载页面的一部分加载模式需要以下内容：

1. 将CommentPageModule导入到懒惰加载的模式主页模块中

2. 确保CommentPage是CommentPageModule 的声明和入口组件数组的一部分

3. 确保没有路由试图延迟加载您的CommentPageModule，因为Ionic4+中的模式本身并不是延迟加载的，它们被打包到可以延迟加载的托管页面模块中。

错误本身意味着IonicModule在实例化时不能用于CommentPage模态。这意味着模块文件中的modal(无论哪个页面启动modal(的"主机"必须导入CommentPageModule。

如果需要进一步帮助，请共享延迟加载的主机页的模块文件。