Using Angular 2 component in Angular 1 app

Question

I am following https://angular.io/docs/ts/latest/guide/upgrade.html steps, namely "Using Angular 2 Components from Angular 1 Code" part.

Have created hero-detail.component.ts with following code:

import { Component } from '@angular/core';
@Component({
  selector: 'hero-detail',
  template: `
    <h2>Windstorm details!</h2>
    <div><label>id: </label>1</div>
  `
})
export class HeroDetailComponent {
}

Then added required code to main.ts:

import { upgradeAdapter } from './upgrade-adapter'; //this existed already
import { HeroDetailComponent } from './hero-detail.component'; //added

//... here other code inbetween

angular.module('heroApp', [])
  .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));

Now I insert <hero-detail></hero-detail> in my html, but see nothing. What is missing?

avj · Accepted Answer · 2016-08-04 12:58:06Z

0

Directive part of code should have been added to app.ts, not main.ts.

answered Aug 4, 2016 at 12:58

avj

1,6961 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Angular 2 component in Angular 1 app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related