8

我有一个使用 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 组件中使用该指令：

当我运行 ng serve 时，应用程序编译得很好，但是当我尝试加载页面时，我得到了提到的错误。

关于我如何继续前进的任何建议？

4

1 回答 1

3

看来您的引导逻辑不正确。

这实际上不是很明显，请确保：

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

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

在此处输入图像描述

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

于 2017-02-03T23:31:04.717 回答