Transcluding Angular Components into AngularJS Directives

Angular components can be transcluded into AngularJS directives.
Here is a very simple Angular component:
import { Component } from "@angular/core";
selector: "a2-transclusion-contents",
template: `<p>{{ message }}</p>`,
export class A2Transclusion {
message = 'I am an Angular Component "transcluded" into AngularJS';
Here is an AngularJS directive that supports transclusion:
export function a1TransclusionDirective() {
return {
restrict: "E",
transclude: true,
scope: {},
bindToController: {},
controller: A1Transclusion,
controllerAs: "a1ProjectionContents",
template: `
class A1Transclusion {}
AngularJS needs to know about both the component and the directive:
import { A2Transclusion } from "./components/a2-transclusion-contents";
import { a1TransclusionDirective } from "./components/a1-transclusion";
// AngularJS Vendor Import
import * as angular from "angular";
// Import the upgradeAdapter singleton
import { upgradeAdapter } from "./upgrade-adapter";
// Name the application
const APPNAME = "angular-upgrade-example";
// Register classic AngularJS modules
.directive("a1Transclusion", a1TransclusionDirective);
Finally, Angular content can be transcluded into AngularJS 1.x like so: