Angular Ng1/Ng2 hybrid app throwing 'No provider for $scope' exception

Question

I'm trying to build an hybrid Ng1/Ng2 app with NgUpgrade as an intermediate step in a migration towards Angular 2.

The bootstrap seems to work:

platformBrowserDynamic().bootstrapModule(AppModule).then( () => {
  adapter.bootstrap(document.body, [Ng1AppModule.name]);
});

But I'm struggling at using a simple Ng1 directive in an Ng2 component, see this very simple plunker: https://plnkr.co/edit/gMSwKKIgEkwcijCCaCMW?p=preview

Even after having upgraded the Ng1 directive and downgraded the Ng2 component, the browser sends a "No provider for $scope!" exception.

What have I missed ?

I know that some people have already reported this exception, but it looks like NgUpgrade has evolved a lot since the beta of Angular 2, and I can't find the appropriate answer for current Angular 2 release.

Answer 1

Found it !

My mistake was to try to bootstrap directly a ng2 module, but it looks like you have to put a ng1 component at top level of the DOM (yes it's written somewhere in the official ngUpgrade guide). Here is the correct updated plunker with a ng1 root component, that calls a ng2 module, that calls another ng1 component.

 const myNg1Root = {
     template: `
       <p>This is the Angular 1 root component</p>
       <ng2root></ng2root>
       `,
};