No provider for $scope! exception with UpgradeAdapter (upgrading angular1 directive to angular2)

[Abhi]

I am using UpgradeAdapter to use an angular1 directive in my angular2 app. I followed the steps mentioned on angular2 upgrade guide

See this plunk for code. It is resulting me into this error -

EXCEPTION: No provider for $scope! (function (scope, elementRef) { -> $scope)

I have an angular1 directive which is element type, with controllerAs style. Also I am not using $scope in the controller code. I am trying to use this angular1 directive within my angular2 app.

So I instantiate the UpgradeAdapter and call upgradeNg1Component method on it with argument as name of my angular1 directive and I pass it in the directive input for my angular2 component.

But then it results in the above error.

Any clue what I may be missing?

[Swapnil Sawant]

I am also stuck on this same error! 

[Daniel Smith]

I could also use some direction on this problem.

[Eric Martinez]

Guys, check this answer http://stackoverflow.com/questions/34864545/cannot-use-angular-1-directive-in-angular-2-app-using-upgradeng1component and see if it helps

[Daniel Smith]

That answer doesn't really help.  The poster comments that he is still receiving the error.

I have come to notice that the error only seems to occur if you reference the Angular2 version of a downgraded Component whose template includes an upgraded AngularJS directive.

On Tue, Jan 19, 2016 at 3:29 PM, Eric Martinez <eric.ma...@gmail.com> wrote:

Guys, check this answer http://stackoverflow.com/questions/34864545/cannot-use-angular-1-directive-in-angular-2-app-using-upgradeng1component and see if it helps

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/dqefRUKpfQs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Abhi]

In my case, I am only referencing an upgraded NG1 component in the template of an NG2 component. This is with Angular2 beta library. 

[Vincent Audy]

I have the same issue, anyone have idea?

[Manish Pal]

Here's your code in working form https://plnkr.co/edit/VzuopVilmDK5sQaQcoDh?p=preview

Couple of things:

1. you need to downgrade the ng2 component as well, because a hybrid ng1 + ng2 app would start as an ng1 app only.

2. your ng2 component was using templateUrl instead of template, even though it was giving an inline template.

[Abhi]

Hey Manish, Thanks for your  solution.

Downgrading angular2 component to use with angular1 App is one such usage. But what if I have to do the other way i.e consume angular1 directive into an angular2 App. 

That's what my use case is. I have a newly written angular2 App where I want to use existing angular1 directive along with other angular2 components. Are you saying that is not supported?

About #2, I admit that's a typo. Even with template field, it doesn't work. 

By the way, this was some months back with beta.1, I have not checked if the problem still exist with rc builds.

[Manish Pal]

Yes looks like that.

https://angular.io/docs/ts/latest/guide/upgrade.html#!#how-the-upgrade-adapter-works

There are two key things to understand about what happens in the DOM of a hybrid application:

1. Every element in the DOM is owned by exactly one of the two frameworks. The other framework ignores it. If an element is owned by Angular 1, Angular 2 treats it as if it didn't exist, and vice versa.
2. The root of the application is always an Angular 1 template.