10

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?

Meligy
  • 35,654
  • 11
  • 85
  • 109
raluca
  • 136
  • 1
  • 5
  • 1
    Any progress with this? I'm experiencing the same issue. – vangorra Dec 08 '16 at 20:37
  • 1
    We actually switched to full angular 2 and migrated all our old components as it was the only possible way. – raluca Apr 11 '18 at 19:46
  • Check the workaround [here](https://github.com/angular/angular/issues/17581#issuecomment-403394982), you need something like this @NgModule({ ... providers: [{provide: '$scope', useExisting: '$rootScope'}], } export class AppModule { ... } – Chen Dachao Feb 20 '19 at 04:12

1 Answers1

5

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:

enter image description here

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

Demchenko Anton
  • 385
  • 4
  • 13