$ scope的提供商！在角度2 app

Question

我有一个使用angular-cli构建的角度2应用程序，我需要在我的一个组件中使用角度1指令（从不同的应用程序重用它）。我按照以下步骤进行操作：

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

但是现在我遇到了这个错误并且无法通过它。我正在使用angular2.0.2（我设法在过去使用beta版本构建了一个混合应用程序，但它是一个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 { }

我的hero-detail.component.ts看起来像这样：

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

我的hero-detail.html看起来像这样：

   <h2>Windstorm details!</h2>

我尝试在另一个角度2组件中使用该指令，只需在模板中添加：

当我运行服务时，应用程序编译正常，但是当我尝试加载页面时，我得到了上述错误。

有关如何推进这项工作的任何建议吗？

Answer 1

看起来你的引导逻辑不正确。

实际上并不十分明显，请确保：

• 您没有使用@NgModule({bootstrap:[ ... ]})引导任何 ng2 组件。相反，您应该在主模块中使用空ngDoBootstrap() { }方法。
• 根模板是 ng1 模板。即在index.html中，您应该只有 ng1 组件或降级 ng2 组件。您可以将 ng2 组件作为根目录，但是您需要先将其降级。

官方升级指南包含DOM结构的示例：

...确保 ng2 注射器具有来自 ng1 的所有必需提供者。