There is no provider for $ scope! error when using angular 1 directive in angular 2 application

Question

I have an angular 2 application built using angular-cli and I need to use the angular 1 directive in one of my components (to reuse it from another application). I have completed the following steps:

https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code

But now I got to this error and can not pass by it. I am using angular2.0.2 (I managed to create a hybrid application in the past with a beta version, but it was an angular1 application, and I used angular 2 components with a downgrade function for the adapter).

In my app.module.ts I have:

import { UpgradeAdapter } from '@angular/upgrade'; const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); @NgModule({ imports: [ BrowserModule, ... ], declarations: [ ... HeroDetail ] }) export class AppModule { } 

and my hero-detail.component.ts looks like this:

 export const heroDetail = { templateUrl: 'hero-detail.html', controller: function() { } }; 

and my hero-detail.html looks like this:

  <h2>Windstorm details!</h2> 

I am trying to use the directive in another angular 2 component by simply adding to the template:

When I start the ng service, the application compiles fine, but when I try to load the page, I get the indicated error.

Any suggestions on how I can move forward with this?

Answer 1

It seems you have the wrong bootstrap logic.

This is actually not entirely obvious, make sure that:

• you are not downloading any ng2 component from @NgModule({bootstrap:[ ... ]}) . Instead, ngDoBootstrap() { } should be empty in your main module.
• The root pattern is ng1 pattern. That is, in index.html you should only have ng1 components or ng2 downgraded components. You can have the ng2 component as the root, but first you need to lower it first.

The official update guide contains an example of a DOM structure:

... which ensures that ng2 injectors have all the necessary suppliers from ng1.