Question

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

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

以下是代码：

myapp.js - 角度1应用定义，es2015

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

myapp.ng2.ts - angular 2 app定义，typescript

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 - angular 2，typescript

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的测试版，我没有进行过升级过程，但是对于Angular版本2+，你还需要声明你想要降级的组件主模块的entryComponents数组：

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

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

这仍然是一个搜索问题和示例的相当困难的领域，所以如果你有一个与Angular版本2+的升级过程相关的问题，请提出一个新问题并ping我。

要开始使用，这里有一个plunkr，它显示了降级Angular组件并在AngularJS中使用它的工作示例。这也在降级过程中使用多次转换，仅适用于4.0.0+版本。

降级Angular2组件未在角度1内呈现

1 个答案: