2016-10-26 4 views
5

У меня есть угловое приложение 2, построенное с угловым cli, и мне нужно использовать угловую директиву 1 в одном из моих компонентов (чтобы повторно использовать его из другого приложения) , Я последовал шаги с:

https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code

Но теперь я получил эту ошибку и не может пройти мимо него. Я использую angular2.0.2 (мне удалось создать гибридное приложение в прошлом с бета-версией, но это было приложение angular1, и я использовал угловые 2 компонента с функцией понижения для адаптера).

В моем app.module.ts у меня есть:

import { UpgradeAdapter } from '@angular/upgrade'; 
const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); 

const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); 

@NgModule({ 
    imports:  [ 
     BrowserModule, 
     ... 
    ], 
    declarations: [ 
     ...  
    HeroDetail 
    ] 
}) 
export class AppModule { } 

и мой герой-detail.component.ts выглядят следующим образом:

export const heroDetail = { 
    templateUrl: 'hero-detail.html', 
    controller: function() { 
    } 
}; 

и мой герой-detail.html выглядит это:

<h2>Windstorm details!</h2> 

Я пытаюсь использовать директиву в другом угловом 2 компонента, просто добавив в шаблоне:

Когда я запускаю службу ng, приложение компилируется в порядке, но когда я пытаюсь загрузить страницу, я получаю указанную ошибку.

Любые предложения о том, как я могу двигаться вперед с этим?

+1

Любой прогресс в этом вопросе? У меня такая же проблема. – vangorra

ответ

2

Кажется, у вас неправильная логика бутстрапа.

Это на самом деле не совсем очевидно, убедитесь, что:

  • вы не самонастройки любой NG2 компонент с @NgModule({bootstrap:[ ... ]}). Вместо этого у вас должен быть пустой метод ngDoBootstrap() { } в вашем основном модуле.
  • корень шаблон ng1 шаблон. То есть в вашем index.html вы должны иметь только ng1 компоненты или пониженные ng2 компоненты. У вас может быть ng2 компонент как корень, но сначала вы должны сначала его понизить.

Официальное руководство по обновлению содержит пример структуры DOM:

enter image description here

... который гарантирует, что NG2 инжекторы имеют все необходимые поставщик из ng1.