[SOLVED] Using native ionic components inside custom module (rc.1)

Update: Solved, just need to add IonicModule for imports in @NgModule. Code below fixed. Maybe it will be useful for someone.

Hi guys.
I try to rewrite my component from beta-11 to separate module on rc.1 and got an error.
My component uses ion-icon.

My code example:

notify.component.ts

'use strict';

import {Component, OnDestroy, ElementRef} from '@angular/core';

import {NotifyService} from './notify.service';

@Component({
    selector: 'notify',
    template: `
    <div *ngFor="let item of notifications; let i = index"
         ngClass="{{item.classes}}"
         class="notify">
          <ion-icon name="md-close-circle"
          class="close-icon"
          (click)="close(i)"></ion-icon>
          <div [innerHtml]="item.text"></div>
    </div>
    `
})

export class NotifyComponent implements OnDestroy {
    private updateNotificationEmmiter: any;

    public notifications: [{
        classes: string;
        text: string;
    }];
    public id: string;

    constructor(
        private notify: NotifyService,
        private elementRef: ElementRef
    ) {
        this.id = this.elementRef.nativeElement.getAttribute('for');
        this.updateNotificationEmmiter = this.notify.subscribe(() => {
            this.notifications = this.notify.get(this.id);
        });
    }

    close(i) {
        this.notify.clear(this.id, i);
    }

    ngOnDestroy() {
        this.updateNotificationEmmiter.unsubscribe();
    }
}

notify.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule, Icon } from 'ionic-angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { NotifyComponent } from './notify.component';
import { NotifyService } from './notify.service';

@NgModule({
    declarations: [
        NotifyComponent,
    ],
    imports: [
        CommonModule,
        IonicModule
    ],
    exports: [
        NotifyComponent,
    ],
    entryComponents: [
        NotifyComponent
    ],
    providers: [NotifyService],
})

export class NotifyModule {}

I add NotifyModule to “imports” array in my AppModule (NgModule decorator) . My app transpilled without error, but in browser console I see:

runtime_compiler.js:353 Uncaught Error: Could not compile ‘Icon’ because it is not a component.

If I comment Icon in entryComponents - I have an errror:

Template parse errors: ‘ion-icon’ is not a known element

Also should I use IonicModule.forRoot() in imports? In NgModule faq says that I should use forChild method but IonicModule doesn’t have it.

Thanks in advance for your help.

1 Like

Thanks, this was helpful!

It did not fixed it for me, I already have IonicModule.forRoot(MyApp) in my imports…
Am I missing something ? :frowning:

It does work with Spinner on my side by the way, so that’s really weird…

Need more info to find out what is not work.

  1. What error did you receive?
  2. You include IonicModule in your custom module or in main app module?
  3. I did not use forRoot(MyApp) syntax.

I replied here since it seems to be the same issue: Dynamically rendering ionic components gives No component factory found for Spinner

I can’t say anything without code example. Minimum:

  1. Component code.
  2. Component module code
  3. Injecting module to app code.

Or project example on plunker.