Понизить угловой компонент до AngularJS - PullRequest
Новая
       19

Понизить угловой компонент до AngularJS

2 голосов
/ 15 апреля 2019

Я пытаюсь понизить мой Angular-компонент, чтобы использовать его в приложении AngularJS.

Для теста я создал довольно тривиальный угловой компонент: 

// my-test.component.ts
@Component({
    selector: 'my-test',
    template: '<h1>Hello World</h1>'
})
export class MyTestComponent {}

, после чего я регистрирую его в своем модуле Angular в декларациях и entryComponents: 

@NgModule({
    imports: [
        SharedModule,
        UpgradeModule
    ],
    declarations: [
        MyTestComponent,
       ... couple other components
    ]
    entryComponents: [ MyTestComponent ]

})
export class MyModule {
    ngDoBootstrap() {}
}

и после этогоЯ просто создал директиву angularjs, чтобы этот компонент был доступен в моем приложении angularJS. 

import {MyTestComponent} from 'path/to/my-test.component';
import {downgradeComponent} from '@angular/upgrade/static';

angular.module(name, [])
.directive('myNgTest', downgradeComponent({component: MyTestComponent}))

, и я использовал ее в своем шаблоне 

<my-ng-test></my-ng-test>

Ошибка:

Ошибка при создании экземпляра компонента «MyTestComponent»: недопустимое приложение «@ angular / upgrade».Вы забыли понизить версию модуля Angular или включить его в приложение AngularJS?

Возможно, я пропускаю какой-то ключевой шаг во всех тех уроках, которые я читал.Нет связи между модулем Angular 2 и модулем AngularJS, однако существует прямой импорт компонента, который необходимо понизить.

Любые рекомендации приветствуются!

1 Ответ

2 голосов
/ 15 апреля 2019

Вам также нужно ввести UpgradeModule и повысить angularjs с angular.Вам также необходимо включить UpgradeModule в imports в @NgModule.

Самозагрузочные гибридные приложения

Для начальной загрузки гибридного приложения выдолжен загрузить каждую из частей приложения Angular и AngularJS.Вы должны сначала загрузить биты Angular, а затем попросить UpgradeModule затем загрузить биты AngularJS. 

import { UpgradeModule } from '@angular/upgrade/static';


@NgModule({ imports:[UpgradeModule]})
export class MyModule {
  constructor(private readonly upgrade: UpgradeModule) {}
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [name], { strictDi: true });
  }
}
...