CODEWITHSUNDEEP
angular
Gerardlamo
Gerardlamo

Reputation: 1723

Angular2 No provider for ViewUtils

So I have searched google couldn't find anything regarding this exception.

platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): No provider for ViewUtils!

What I am trying to do is create and insert a component dynamically, and inject it with an object:

So my baseClass that does the creating looks something like this:

import { Component, OnInit, AfterViewInit, OnDestroy, ComponentResolver, ViewContainerRef, Injector, ReflectiveInjector, provide} from '@angular/core';
...
import { customNode } from '../my-own-types/backend.types';
import { LandingComponent } from '../../pages/landing/landing.component';

@Component({
    moduleId: module.id,
    template: '<template #page_content></template>)',
    providers: [ NodeService ]
})

export class BaseComponent implements OnInit, AfterViewInit, OnDestroy {
    private error:string | boolean = false;
    private cmpRef:any;

    constructor(
        private _injector: Injector,
        private VCR: ViewContainerRef,
        private CR: ComponentResolver
    ) {}

    ...

    ngAfterViewInit() {
        ... //getting node from service
        if (node) {
            let resolvedProviders = ReflectiveInjector.resolveAndCreate([
                    provide(customNode, {useValue: node})
                ]);
            // let child = ReflectiveInjector.fromResolvedProviders(resolvedProviders, this._injector);
            switch (node.type || '') {
                case 'landing' :
                    this.CR.resolveComponent(LandingComponent).then((factory) => {
                        this.cmpRef = this.VCR.createComponent(factory, 0, resolvedProviders, []);
                    });
                break;
                default: {
                    console.log("BASE COMPONENT: ERROR!!!!");
                }
            }
        }
    }
    ...
}

In my LandingComponent's constructor I want to do something like this:

    constructor(
        private node: customNode,
        private _injector: Injector) {

        console.log("Landing page constructed");

        this.loadNode = (node) => {
            this.content = node.content;
            this.created = node.created;
        }
        if (!this.node)
            this.node = _injector.get("node");
        if (this.node)
            this.loadNode(this.node)
    }

Upvotes: 1

Views: 888

Answers (2)

apreg
apreg

Reputation: 637

Have you tried to add the parent injector?

 let resolvedProviders = ReflectiveInjector.resolveAndCreate([
                provide(customNode, {useValue: node})
            ], this._injector);

Upvotes: 1

Gerardlamo
Gerardlamo

Reputation: 1723

So I found a way to make it work, which is good enough for now, but I am guessing not really good practice.

The solution: I am not using an reflectiveInjectors or so, simply calling a function defined within the LandingComponent.

In my baseComponent, AfterViewInit I now have:

ngAfterViewInit() {
    ... //Code to get node
    if (node) {
        switch (node.type || '') {
            case 'page' :
                this.CR.resolveComponent(LandingComponent).then((factory) => {
                    this.VCR.clear();
                    this.cmpRef = this.VCR.createComponent(factory, 0, this._injector, []);
                    this.cmpRef.instance.loadNode(node);
                    return this.cmpRef;
                });
            break;
            default: {
                console.log("BASE COMPONENT: ERROR!!!!");
            }
        }
    }
}

My LandingComponent now looks like:

constructor(private node: customNode, private _injector: Injector) {}

loadNode(node) {
    this.content = node.content;
    this.created = node.created;
}

Upvotes: 0

Related Questions