Dynamically loading a AoT component from another file than the app?


#1

I have this problem, in my app I want some components to be declared somewhere else. In another file on the server. Some of these components are only to be shown for some users. So when Component1 is supposed to be shown I would like to add this dynamically to the module by getting the file from the server . Basically the app does not know at all about the component on build time.

Is this possible or am I trying to do something that is impossible with angular 2/Ionic 2?

I’ve looked at ComponentFactoryResolver but I get an error if the component is not declared in ngmodule.

You may ask why? The customer and my boss would like to have the opportunity to just update these components and not the whole app everytime there is a small change in one component.

I’ve worked with angular 1 a lot before but i am new to angular 2 so I might just be to new to understand how to do it, the problem is that If I can’t do this I can’t use this framework for my app. So I don’t want to start building on it and then realizing that this important part will not work at all.

var DynamicComponent = (function () {

    function DynamicComponent(toastCtrl) {
        this.toastCtrl = toastCtrl;
    }
    DynamicComponent.prototype.saveForm = function () {
        var toast = this.toastCtrl.create({
            message: ’Form saved.',
            duration: 3000
        });

        toast.present();
    };
    DynamicComponent = __decorate$121([
        Component({
            selector: ’dynamic-component',template:''
        }),
        __metadata$20('design:paramtypes', [ToastController])
    ], DynamicComponent);
    return DynamicComponent;
}());

#2

Is this what you mean? Lazy loading modules
Here is how you can create components, templates, modules runtime.