Unhandled Promise rejection: Template parse errors: 'custom-icon' is not a known element

[anphu7492]

Hi, I get this error even though CustomIconsModule has been imported in app.module.ts. Does anyone encounter the same problem? Here is the system info:

    @ionic/cli-plugin-cordova       : 1.6.1
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.2.5
    Node              : v7.3.0
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b
    ios-deploy        : 1.9.0
    ios-sim           : 5.0.13
    npm               : 3.10.10

[GerritErpenstein]

Hi @anphu7492 Please verify the example app works for you: https://github.com/GerritErpenstein/ionic2-custom-icons-example

[josiekiwanuka]

I encountered the same issue

[GerritErpenstein]

Hi @josiekiwanuka Same question for you: Does the example project work? https://github.com/GerritErpenstein/ionic2-custom-icons-example

[GerritErpenstein]

I'm closing this issue as there are no more comments or questions. Feel free to reopen the issue if you can provide more information.

[ThorvaldAagaard]

Hi Gerrit

I have reproduced the error in the demo-project:

cli packages: (D:\Dokumenter\GitHub\ionic2-custom-icons-example\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : browser 4.1.0
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.1
    npm               : 5.3.0
    OS                : Windows 10

To recreate the error you need to do the following

1 : Add the browser as platform

ionic cordova platform add browser

2: start using Ionic3 module.ts for single pages.

I created the following : platform.page.module.ts

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

@NgModule({
    declarations: [
        PlatformPage
    ],
    imports: [
      IonicPageModule.forChild(PlatformPage)
    ],
    entryComponents: [
        PlatformPage
    ]
  })
  export class PlatformPageModule {}

Now you can issue

ionic cordova build browser

and all looks fine

but when building the browser version for production

ionic cordova build browser --prod

You will first get an error that PlatformPage is included twice, so you need to remove the definition of PlatformPage from app.module.ts

Then when you try again to get the production version you will get the error:

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

   <div>
      [ERROR ->]<custom-icon set="test" name="platform-logo" large></custom-icon>
   </div>

"): ng:///D:/Dokumenter/GitHub/ionic2-custom-icons-example/src/pages/platform/platform.page.html@12:6

Solution is to add import {CustomIconsModule} from 'ionic2-custom-icons'; in the new module.ts

[GerritErpenstein]

Thanks @ThorvaldAagaard! I'll look into it asap.

[GerritErpenstein]

You are correct! This is not a bug, but rather by design. Just add CustomIconsModule to the imports of your sub-module. Taking your example it should look like this:

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {CustomIconsModule} from 'ionic2-custom-icons';
import {PlatformPage} from './platform.page';

@NgModule({
   declarations: [
      PlatformPage
   ],
   imports: [
      IonicPageModule.forChild(PlatformPage),
      CustomIconsModule // <-This is the important part!
   ],
   entryComponents: [
      PlatformPage
   ]
})
export class PlatformPageModule {
}

If you have more than just one module or directive that should be available in multiple sub-modules, a shared module is a good approach: https://angular.io/guide/ngmodule#shared-modules

I should probably mention this in the docs. I keep this issue open to remind myself. :wink:

[ThorvaldAagaard]

Yes, and quite interesting that the compiler only shows it when using the --prod directive