如何 bootstrap 来自 ES5 的 angular2 组件？

Question

我有一个 vanilla ES5 脚本，我试图在运行时创建一个 angular2 组件，bootstrap 就像这样，

var mycomp = require('complibrary').mycomponent;
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(mycomp);
});

考虑一下 complibrary 是我们内部开发的一个单独的 angular2 组件库。 mycomponent 是我们导出以供 ES5 代码使用的组件之一。我们正在使用 rollup 吐出我们组件的最终 umd 定义。下面是 mycomponent 的摘录。

var mycomponent = (function () {
function mycomponent() {
    this.name = "Abhang Rane";
}
mycomponent = __decorate([
    _angular_core.Component({
        selector: 'mycomponent',
        template: '<h1>{{name}}</h1>'
    }),
    __metadata('design:paramtypes', [])
], mycomponent);
return mycomponent;
}());

这适用于 angular 2.0.0.rc1，但对于 angular 2.2 及更高版本，platformBrowserDynamic 上没有可用的 bootstrap 方法。有什么办法可以用最新的 angular 2 版本来实现这个目标吗？最好不改变 mycomponent...

Answer 1

Angular modules 在 Angular 2.0.0 RC5 中作为 AngularJS 模块的直接继承者引入。

如所示，是：

platformBrowserDynamic().bootstrapModule(AppModule);

并且应该被引导的组件应该有一个相应的模块定义：

var AppModule = NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
.Class({ constructor: function () {} });

如何 bootstrap 来自 ES5 的 angular2 组件？

How to bootstrap an angular2 component from ES5?

ecmascript-5

angular