Unexpected provider when downgrading Angular component to AngularJS

Question

I've managed to successfully bootstrap my hybrid app, but as soon as I try to use a downgraded Angular component directive in my AngularJS template I'm getting this error:

Error: StaticInjectorError[{providers:[[object Object]], parent:[object Object], name:"DowngradeComponentAdapter"}]: Unexpected provider
    at staticError (core.js:1360)
    at recursivelyProcessProviders (core.js:1209)
    at new StaticInjector (core.js:1079)
    at Function.webpackJsonp../node_modules/@angular/core/esm5/core.js.Injector.create (core.js:1051)
    at DowngradeComponentAdapter.webpackJsonp../node_modules/@angular/upgrade/esm5/static.js.DowngradeComponentAdapter.createComponent (static.js:230)
    at doDowngrade (static.js:528)
    at Object.link (static.js:554)
    at angular.js:1383
    at invokeLinkFn (angular.js:10610)
    at nodeLinkFn (angular.js:9999) "<test-comp>"

Both my AngularJS host component and are very simple static components. Can't google anything similar. Please help.

devmiles.com · Accepted Answer · 2018-01-15 10:47:50Z

2

The issue apparently was that I've had a more recent version of @angular/upgrade installed (5.2) and it wasn't compatible with other angular packages on my system (5.1).

answered Jan 15, 2018 at 10:47

devmiles.com

10k6 gold badges35 silver badges48 bronze badges

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

1 Comment

ManishKumar Over a year ago

I appreciate your answer. I was also facing same issue. I think all the angular packages should have same version otherwise things will go south

Manit · Accepted Answer · 2018-01-12 08:41:28Z

If I understood your problem correctly, you are trying to use an Angular component from AngularJS code. Given this is correct, hopefully the below information should help:

The resulting downgraded component which is a directive, you need to register that in the AngularJS module.

angular.module('yourApp', [])
       .directive(
       'yourComponent',
       downgradeComponent({ component: YourComponent }) as 
       angular.IDirectiveFactory);

Because this is an Angular component, you need to add it to your AppModule declarations.
As this component is being used by AngularJS module and if it is an entry point, add it to entryComponents for NgModule.

I am guessing you missed to register the component somewhere. For reference - https://angular.io/guide/upgrade#using-angular-components-from-angularjs-code for more information

Vignesh · Accepted Answer · 2018-01-12 07:06:02Z

0

Try to import the HttpClientModule in your app.module.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({
    imports: [
     HttpClientModule
    ]
})

answered Jan 12, 2018 at 7:06

Vignesh

2,3844 gold badges28 silver badges48 bronze badges

1 Comment

YourReflection Over a year ago

What would the solution look like, when my angular.module code is written in JavaScript and not TypeScript? I have been looking for a sample project which demonstrates how to downgrade an Angular component to be used in an AngularJS application which is written in pure JavaScript. However, everything I find are AngularJS apps that are written in TypeScript.

Collectives™ on Stack Overflow

Unexpected provider when downgrading Angular component to AngularJS

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related