Getting error while downgrading angular 2 component

Question

I am running hybrid angular 1 app and angular 2 app. I have created a component ActivateAccount. While i am running this application. I am getting console error while downgrading component. Cannot read property 'resolveComponentFactory' of undefined <activate-account class="ng-scope">

I do searched related to this error but i found nothing.

I am referring Using Angular Components from AngularJS Code

app.module.js

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
import { HttpModule }    from '@angular/http';

import { ActivateAccountComponent } from '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.ts';


@NgModule({
  imports:  [ 
                BrowserModule,
                UpgradeModule ,
                HttpModule
            ],

  declarations: [
                 ActivateAccountComponent
                    ],
    entryComponents: [
                    ActivateAccountComponent
                       ]
})

export class AppModule {
    constructor(private upgrade: UpgradeModule) { }

    ngDoBootstrap() {

    var app= angular.module('IdeolveActivateAccount', ['ngMaterial', 'jlareau.bowser', 'validation.match', 'ngDialog', 'ngMessages']);


        app.controller("ActivateAccountApp", loadActivateAccountApp);
        angular.module('IdeolveActivateAccount').directive('activateAccount', downgradeComponent({ component: ActivateAccountComponent }));

        app.component("ideolveformcomponent",{
            bindings:{
                showideolvelink: '<'
            },
            controller: 'ActivateAccountApp',
            templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
        });

        this.upgrade.bootstrap(document.body, ['IdeolveActivateAccount']);
    }
}

activateaccount.ts

import { Component } from '@angular/core';


@Component({
    selector: 'activate-account',
    template: '<div class="ActivateAccountContainer marginlefttwentypx margintoptwentypx marginrighttwentypx marginbottomtwentypx heighthundredpercent"></div>'     
})

export class ActivateAccountComponent {
    constructor() {}    
}

I think i am missing something. I have checked all my code against tutorial given into above link, But i am getting console error.

why you didn't declare emailId and BASE_URL in your ActivateAccountService? Try email: string; and BASE_URL: string;, before constructor — Jaroslaw K.
– Jaroslaw K., Commented Oct 10, 2017 at 12:32
@JaroslawK. Updated my code. But still getting same error. Anything i am doing wrong to downgrade component ? — Kaustubh Khare
– Kaustubh Khare, Commented Oct 10, 2017 at 12:41
Try add providers: [Http, ActivateAccountService] to providers arrays in app.module and delete from @Component in ActivateAccountComponent — Jaroslaw K.
– Jaroslaw K., Commented Oct 10, 2017 at 12:55

Jaroslaw K. · Accepted Answer · 2017-10-10 14:27:40Z

1

After a long discussion, the following steps helped:

app.module.ts

providers: [
    {provide: 'CLIENT_ID', useValue: CLIENT_ID},
    {provide: 'APP_NAME', useValue: APP_NAME},
    {provide: 'AUTH_TOKEN', useValue: AUTH_TOKEN},
    {provide: 'CAN_EDIT', useValue: CAN_EDIT},
    //{provide: Http, useValue: Http}, <-- unneccesary, when import HttpModule
    ActivateAccountService // <-- provide service in module, not component
]

activate-account.service.ts

Removing URLSearchParams from constructor, bacause it is not injectable object. Instead of this, you shoul use @angular/router module

answered Oct 10, 2017 at 14:27

Jaroslaw K.

5,4142 gold badges42 silver badges66 bronze badges

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

1 Comment

Kaustubh Khare Over a year ago

I am getting same error after solving URLSearchParams.

Collectives™ on Stack Overflow

Getting error while downgrading angular 2 component

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