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

#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
#2

Thanks, this was helpful!

#3

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…

#4

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.
#5

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

#6

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.