Dynamically rendering ionic components gives No component factory found for Spinner

Ionic Framework ionic-v3
1

I am trying to replace textual url of images with their images asynchronously in the page.
To do this, I added a rich-content directive that places a <spinner></spinner> instead of the url while it loads the image and then replaces the spinner with the actual image.

I would like to use the Ionic Spinner component since we use it everywhere else, but I can’t seem to add it dynamically. Here is what I have tried:

import { Directive, ElementRef, ViewContainerRef, ComponentFactoryResolver} from '@angular/core';
import {Spinner} from 'ionic-angular';

…

constructor(private componentFactoryResolver: ComponentFactoryResolver,
                   private viewContainer: ViewContainerRef) {  }

…

let spinnerFactory = this.componentFactoryResolver.resolveComponentFactory(Spinner);
let ref = this.viewContainer.createComponent(spinnerFactory);

This returns a runtime error: No component factory found for Spinner
It works as expected with my own Components, so I’m assuming that I am missing some setup.

1 Like
2

Found the issue, in the end it has nothing to do with Ionic… Spinner has to be entered in entryComponents from src/app/app.module.ts

2 Likes
3

Indeed, that was the missing part !
By the way you can add it to the entry component of your own component instead of app.module.ts.

On my side, I’m trying to do exactly the same with Icon, but I’m getting that funny error:

Unhandled Promise rejection: Could not compile 'Icon' because it is not a component. ; Zone: <root> ; Task: Promise.then ; Value: Error: Could not compile 'Icon' because it is not a component.

Icon is a component same as Spinner, so I don’t understand… :worried:

1 Like
4

Did you add the @Component decorator to your Icon component?

5

Well no I didn’t, I’m directly calling the Ionic Icon class, and indeed there is no @Component decorator, but there is no decorator for Spinner and it works, so…

6

Do you have any hint ?

For more informations, I just made a new Ionic project (sidemenu starter), created a component in which we can pass some html (essentially <ion-icon></ion-icon>). Today I’m doing it using [innerHtml] but nothing get injected.