$scope 没有提供商！在 Angular 2 应用程序中使用 Angular 1 指令时出错

Question

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

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

但现在我遇到了这个错误并且无法克服它。我正在使用 Angular2.0.2（我过去设法使用 Beta 版本构建了一个混合应用程序，但它是一个 Angular1 应用程序，我使用了具有适配器降级功能的 Angular 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>

我尝试通过在模板中添加来在另一个 Angular 2 组件中使用该指令：

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

关于我如何推进这件事有什么建议吗？

Answer 1

您的引导逻辑似乎不正确。

实际上不太明显，请确保：

• 您不会使用 @NgModule({bootstrap:[ ... ]}) 引导任何

  ng2

  组件。相反，您的主模块中应该有空的

  ngDoBootstrap() { }

  方法。
• 根模板是ng1模板。 IE。在您的

  index.html

  中，您应该只有 ng1 组件或降级的 ng2 组件。您可以将 ng2 组件作为根，但您需要先将其降级。

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

...这确保 ng2 注入器拥有来自 ng1 的所有必需的提供程序。

Answer 2

我在 app.module.ts 的提供者中添加 {provide: '$scope', useExisting: '$rootScope'} 并且它有效。 @NgModule({ 声明：[ 应用程序组件， XXXXXX, ], 进口：[ 浏览器模块， 升级模块， IonicModule.forRoot(), 应用程序路由模块]，

提供商：[{ 提供：RouteReuseStrategy， useClass：IonicRouteStrategy },{provide: '$scope', useExisting: '$rootScope'}],

//引导程序：[AppComponent]， })