Angular 5 (or 4): downgrade component for use in AngularJS

The other day there was a very unusual task: it took to learn how to use components from Angular in AngularJS. It seems like a five minute task, because the Internet is replete with similar examples, and there seems to be something in the documentation. But in fact it turned out that not everything is so sunny and the solution of the issue took much longer. In general, lucky supporters of Legacy code and just angular-deviants dedicated

First, the traditional rubric TL DR: Good grafomanit, example in the studio

Well, now you can grab.
')
To begin with, the documentation of the Angular is extremely bad. So it was in the first version, it continues to this day. Tradition, in general. Therefore, for the basis for downgrade took this article . Now the code itself:

Attention! For the fullness of the sensations below, I give a no-typescript example of an angular component. All further code will be designed in this style.

So, actually, the component:

let HelloComponent = function () { }; HelloComponent.annotations = [ new ng.core.Component({ selector: 'hello-world', template: 'Hello World!' }) ]; 

It would seem that this is enough, it's time to call downgradeComponent . But no. Here the documentation misfired, since the example given in it is incomplete.

Add the code for AppModule:

 class AppModule { } AppModule.prototype.ngDoBootstrap = function() { // do nothing }; AppModule.annotations = [ new ng.core.NgModule({ declarations: [HelloComponent], imports: [ng.upgrade.static.UpgradeModule, ng.platformBrowser.BrowserModule], entryComponents: [HelloComponent] }) ]; 

About ngDoBootstrap can be gleaned from the article that I mentioned above, as the basis for the downgrade.

So, the module is done, now you need to connect all this to AngularJS:

 angular.module("app", []) .directive("helloWorld", ng.upgrade.static.downgradeComponent({component: HelloComponent})) 

Then add the download of the Angular itself:

 ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { const upgrade = platformRef.injector.get(ng.upgrade.static.UpgradeModule); upgrade.bootstrap(document.body, ['app'], { strictDi: true }); }); 

But this example does not work, says something about

Unknown provider: $$ angularLazyModuleRefProvider

In the end, it turns out that you just need to pass $$ UpgradeModule as a dependency of the AngularJS module.

PS decided to write an article for reasons that someone else might need this. I would be glad if I could help someone.

PPS More links: write on angular in es5