当切换到@IonicPage组件时，Ionicons不再显示

Question

将我的页面更改为延迟加载(通过带有不同模块的@IonicPage加载)之后，所有的电离图标都消失了。在app.module.ts中直接声明组件时，一切正常。

我确实找到了一个使用web组件的解决方法，但是它非常麻烦，我仍然认为这要么是一个bug，要么我不知道如何导入适当的模块，或者没有按照它的要求创建结构。

我就是这样使用电离图标的：

 <button [navPush]="'admin'" ion-button icon-end>
        Admin
        <ion-icon name="star"></ion-icon>
 </button>

• 破碎版：https://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-broken
• “无延迟加载”工作版本：https://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-fix-no-lazy-load
• 修正(变通#499)版本：https://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-workaround-fix

它应该是什么样的：

​

切换到单独模块和@IonicPage组件后不再可见的图标：

​

我还创建了一个包含所有细节的问题：https://github.com/ionic-team/ionicons/issues/526

，我的问题是：，我们需要显式地导入离子图标作为代码中的一个模块吗？如果是的话，我怎样才能做到。

任何帮助都非常感谢，谢谢。

Answer 1

您需要在任何使用Ionic组件的组件模块中导入IonicModule，而不是使用forRoot()，而只是导入IonicModule。

按以下方式更新components.module.ts文件：

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { AppFooterComponent } from './app-footer/app-footer';
import { AppHeaderComponent } from './app-header/app-header';
@NgModule({
  declarations: [
    AppFooterComponent,
    AppHeaderComponent
  ],
  imports: [
    IonicModule,
  ],
  exports: [
    AppFooterComponent,
    AppHeaderComponent
  ]
})
export class ComponentsModule {}