No provider for $scope! error when using a angular 1 directive in an angular 2 app

Question

I have an angular 2 App built with angular-cli and I need to use an angular 1 directive in one of my components (to re-use it from a different application). I followed the steps from:

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 cannot get past it. I am using angular2.0.2 (I managed to build a hybrid app in the past with the beta version but it was an angular1 app and I used angular 2 components with downgrade function of 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 try to use the directive in another angular 2 component simply by adding in the template:

When I run ng serve, the application compiles fine but when I try to load the page I get the mentioned error.

Any suggestions on how I can move forward with this?

Answer 1

It seems you have incorrect bootstrap logic.

It's actually not quite obvious, make sure that:

• you don't bootstrap any ng2 component with @NgModule({bootstrap:[ ... ]}). Instead, you should have empty ngDoBootstrap() { } method in your main module.
• root template is ng1 template. I.e. in your index.html you should have only ng1 components or downgraded ng2 components. You can have ng2 component as a root, but you need to downgrade it first.

Official upgrade guide contains an example of DOM structure:

... which ensures that ng2 injectors have all required providers from ng1.