降级的 Angular2 组件未在 Angular 1 内呈现答案

【问题标题】：Downgraded Angular2 component not rendered inside angular 1降级的 Angular2 组件未在 Angular 1 内呈现
【发布时间】：2017-02-07 23:22:12
【问题描述】：

我们有一个独特的情况，我们使用 typescript，混合 ng1 和 2，但不使用任何模块加载器。我能够引导 ng 1 和 ng2，但我无法从降级的 angular 2 组件中得到任何响应，我在代码中放置了一个断点并看到代码运行，但该组件没有显示任何内容。

我没有收到任何错误，不是在编译阶段，也不是在运行时。

代码如下：

myapp.js - Angular 1 应用定义，es2015

(function() {
    'use strict';
    angular.module('myApp', []);
})();

myapp.ng2.ts - Angular 2 应用定义，打字稿

namespace MyApp {

let NgModule = ng.core.NgModule;
let BrowserModule = ng.platformBrowser.BrowserModule;
let UpgradeAdapter = ng.upgrade.UpgradeAdapter;

@NgModule({
   imports: [BrowserModule]
})

export class MyAppNg2 {}

export const upgradeAdapter = new UpgradeAdapter(MyAppNg2);

$(document).ready(function() {
    upgradeAdapter.bootstrap(document.body, ['MyApp'], {strictDi: false});
});

}

fullDetails.component.ts - 角度 2，打字稿

namespace MyApp.Components.Misc {

    let Component = ng.core.Component;

    @Component({
        selector: 'full-details-header',
        template: `This is ng2 component`
    })

    export class FullDetailsHeaderComponent {
    }

}

bootstrap.js - angular1, es2015

angular.module('myApp').component('fullDetailsHeader', MyApp.upgradeAdapter.downgradeNg2Component(MyApp.Components.Misc.FullDetailsHeaderComponent));

【问题讨论】：

你找到解决办法了吗？

标签： javascript angularjs angular typescript

【解决方案1】：

这有点难说，因为我认为这是针对 Angular 的 beta 版本，我还没有进行升级过程，但是对于 Angular 2+ 版本，您还需要声明要降级的组件主模块的entryComponents 数组：

@NgModule({
   imports: [BrowserModule],
   entryComponents: [FullDetailsHeaderComponent]
})

假设这是 Angular 测试版，而您没有太多工作，我会放弃它并使用最新版本的 Angular 并遵循 official guide。在我看到的在 Angular 的 beta 和发布版本之间创建 ng1/ng2 混合应用程序的示例中，有太多不同之处，我认为不值得对与 beta 升级过程相关的问题进行故障排除。

这仍然是一个很难搜索问题和示例的领域，因此如果您有与 Angular 2+ 版本升级过程相关的问题，请提出新问题并联系我。

为了让您入门，这里有一个plunkr，它显示了一个降级 Angular 组件并在 AngularJS 中使用它的工作示例。这也在降级过程中使用了多重嵌入，仅适用于 4.0.0+ 版本。

【讨论】：