Import and Export Customized Components

本文介绍了如何在Ionic项目中正确地导入和使用共享组件,包括常见错误及其解决方案,并提供了一个临时解决办法来确保组件能在不同页面中正常工作。
  1. create a component with the command below

    ionic g component common-A

  2. import CommonModule into component.module.ts

    import { CommonModule } from '@angular/common';
    ...
    @NgModule({
        ...
        imports: [
            CommonModule
        ],
        ...
    })

  3.  import ComponentsModule from component.module.ts into app.module.ts

    import { ComponentsModule } from '../../components/components.module';
    ...
    @NgModule({
        ...
        imports: [
            ...
            ComponentsModule,
            ...
        ]
    })

  4.   Then the errors are coming. After you finished all the steps up above, you can use the component in the root page freely but error in other pages. The error goes like this below :

    Uncaught (in promise): Error: Template parse errors: 
    'fa-icon' is not a known element: 
    1. If 'fa-icon' is an Angular component, then verify that it is part of this module. 
    2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

    ​​I have only found a way to solve it so far: 
    1. import the common-A component in pageName.module.ts file of the page you want to use the component

      import { ComponentsModule } from '../../components/components.module';
      ...
      @NgModule({
          imports: [
              ...
              ComponentsModule,
              ...
          ]
      })

    2. I think there should be a way in a higher level way to declare and import the common components. About to figure it out in days after. 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值