Angular2 with ngUpgrade: Angular does not recognize component in view

Question

After few days of playing with Angular 2 Hero tutorial, I decided to play with ngUpgrade. So I bootstrap Angular with upgradeAdapter and downgrade Angular 2 component to match Angular 1 version:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {UpgradeAdapter} from "angular2/upgrade";
export const upgradeAdapter: any = new UpgradeAdapter();
import {TagFormController} from "../tags/form/TagFormController";

(function(): void {
    "use strict";
    upgradeAdapter.bootstrap(
        document.body,
        ["application"],
        {
            strictDi: true
        }
    );

    angular
        .module("application")
        .directive("tag-form", upgradeAdapter.downgradeNg2Component(TagFormController));
})();

Typescript TagFormController:

/// <reference path="../../typings/angularjs/angular.d.ts" />
///<reference path="../../custom-ts-types/custom-ts-types.ts"/>

import {Component, Input, Output, OnInit} from "angular2/core";
    @Component({
        selector: "tag-form",
        templateUrl: "src/tags/form/tagForm.html",
    })
    export class TagFormController
    implements IAngularComponent, OnInit {
        @Input()
        public articles: any[];
        @Input()
        public mode: string;
        @Output()
        public saveTag: any;
        @Output()
        public goToEditMode: any;
        public tag: any;
        @Input()
        public tagId: number;
        @Input()
        public tagValue: number;
        @Input()
        public tagArticles: any[];
        @Output()
        public cancel: any;
        constructor() {
            console.log("Running");
        }

        public $onInit(): void {
            this.tag = {
                articles: this.tagArticles,
                id: this.tagId,
                value: this.tagValue,
            };
        }

        public ngOnInit(): void {
            this.tag = {
                articles: this.tagArticles,
                id: this.tagId,
                value: this.tagValue,
            };
        }

        public save(tag: any): void {
            if (typeof tag.id !== "number") {
                throw new TypeError("Id should be provided for tag, but is " +
                    typeof tag.id + " with value: " + String(tag.id));
            }
            console.log(tag.value);
            this.saveTag({
                $tag: tag
            });
        }
        public edit(tag: any): void {
            if (typeof this.cancel !== "function") {
                throw new TypeError("cancel function should be provided and will be checked later!");
            }

            if (typeof tag.id !== "number") {
                throw new TypeError("Id should be provided for tag, but is " +
                    typeof tag.id + " with value: " + String(tag.id));
            }
            this.goToEditMode({
                $tag: tag
            });
        }
        public cancelEdit(): void {
            this.cancel();
        }
    }
    console.log("I am here!");

If I look into Developer Tools in Chrome, everything should be OK, request for TagFormController is sent and I am here is displayed in console. But usage of tagForm directive is empty inside, for me it looks like Angular does not recognize it properly. I use tagForm diretcive in this way from other tag directive:

<tag-form
        *ngIf="$ctrl.tagLoaded"
        [articles]="$ctrl.articles"
        [mode]="$ctrl.mode"
        (saveTag)="$ctrl.saveTag($tag)"
        (goToEditMode)="$ctrl.goToEditMode($tag)"
        [tag-id]="$ctrl.tag.id"
        [tag-value]="$ctrl.tag.value"
        [tagArticles]="$ctrl.tag.articles"
        (cancel)="$ctrl.cancel()">
</tag-form>

I have to slightest idea what I am doing from. Maybe is important that I don't use SystemJS for Angular 1 part of project, but as I wrote request for TagFormController is sent. Can you see where I make mistake? I will be grateful if anybody help me - thank you in advance!

Thierry Templier · Accepted Answer · 2016-03-25 19:53:44Z

3

+50

Perhaps you could try the following:

angular
    .module("application")
    .directive("tagForm", upgradeAdapter.downgradeNg2Component(TagFormController));

instead of:

angular
    .module("application")
    .directive("tag-form", upgradeAdapter.downgradeNg2Component(TagFormController));

Here is a working plunkr: http://plnkr.co/edit/2i46p48bTUN6jP9rTarR?p=preview.

answered Mar 25, 2016 at 19:53

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Radek Anuszewski Over a year ago

I have tried but it didn't work, but the problem was that I bootstrap with upgradeAdapter and then downgrade TagFormController. When I looked to your Plunkr it made me realize that first I have to downgrade and then upgrade, and if I swap it (and replace kebab-case with camel-case as you suggested) it looks like now Angular recognized it (there are some errors, but at least something happed) - thank you so much for help!

Collectives™ on Stack Overflow

Angular2 with ngUpgrade: Angular does not recognize component in view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related