切换至@IonicPage懒加载组件后Ionicons图标消失问题求助

我之前也碰到过一模一样的情况，其实核心问题是懒加载模块没有正确继承Ionic的组件和指令——毕竟每个@IonicPage对应的模块都是独立的，不会自动继承app.module里的全局配置。下面给你几个靠谱的解决步骤：

1. 检查懒加载页面模块的配置 #

每个懒加载页面的xxx.module.ts文件里，必须用IonicPageModule.forChild(PageName)来导入Ionic模块，而不是直接用IonicModule。举个例子：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { YourPage } from './your-page';

@NgModule({
  declarations: [YourPage],
  imports: [
    // 重点：这里一定要用forChild，它会把Ionic的内置组件（包括ion-icon）注入到当前懒加载模块
    IonicPageModule.forChild(YourPage)
  ]
})
export class YourPageModule {}

2. 确保app.module.ts里不声明懒加载页面 #

如果你的app.module.ts里还保留了这些懒加载页面的声明，赶紧删掉！懒加载页面只能在自己的模块里声明，否则会导致模块冲突，Ionic的组件无法正常加载。

3. 清理构建缓存（很容易忽略的步骤） #

有时候缓存会导致模块加载异常，试试执行以下命令清理缓存后重新启动：

# 清理Ionic缓存
ionic cordova clean
# 清理npm缓存
npm run clean
# 无缓存启动项目
ionic serve --no-cache

4. 自定义图标的特殊处理（如果用了自定义图标） #

如果你用了自定义的Ionicons图标，除了上述步骤，还需要在懒加载模块里导入图标模块，或者在app.module.ts里全局导入，确保图标资源能被所有模块访问到。

按照上面的步骤操作后，ion-icon应该就能正常显示了，不用再折腾web components的繁琐方式啦。

内容的提问来源于stack exchange，提问作者Andrei