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

Question

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

我确实找到了一个 workaround using web components，但它很麻烦，我仍然认为这是一个错误，或者我不知道如何导入正确的模块，或者没有按预期创建结构到.

这就是我使用 ionicons 的方式：

 <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
"No lazy load" 工作版本：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

我的问题是：我们是否需要在代码中将 ionicons 作为模块显式导入？如果是这样，我该怎么做。

非常感谢任何帮助，提前致谢。

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 {}

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

Ionicons not showing anymore when switching to @IonicPage components

ionic-framework

ionicons

ionic3

angular