降级的Angular2组件未在angular 1内渲染

Question

我们有一种独特的情况，我们使用打字稿，将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));

Answer 1

很难说，因为我认为这是针对Angular的Beta版，我还没有完成升级过程，但是对于Angular 2+版，您还需要在entryComponents数组中声明要降级的entryComponents您的主要模块：

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

假设这是针对Angular beta的，并且您没有太多工作，那么我将废弃它并使用最新版本的Angular并遵循官方指南 。 在我看到的用于在Beta版本和Angular版本之间创建ng1 / ng2混合应用程序的示例中，有太多不同之处，我认为不值得解决与Beta升级过程相关的问题。

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

首先，这是一个plunkr ，其中显示了降级Angular组件并在AngularJS中使用它的工作示例。 这也将在降级过程中使用多次包含，仅适用于4.0.0+版本。