In my/our project, I need to downgrade an angular component which makes use of transclusion. Since this downgraded component would be used at multiple locations throughout the AngularJS part of the application, it is wrapped within the existing AngularJS component. Now the resulting issue is that content that would be transcluded in the wrapper component via ng-transclude, can't be processed and produces an error in the console.
I can't discern whether this is a bug or intended behaviour.
The simplified problem:
Angular Component:
@Component({
selector: 'ng-component',
template: `
<div>
<span>NgComponent Content:</span>
<ng-content></ng-content>
</div>
`
}) class NgComponent {}
Downgrade:
angular
.module(downgradedAngularAppModule)
.directive(
'ngComponentDowngrade',
downgradeComponent({ component: NgComponent })
);
AngularJs Component:
angular
.module(angularjsAppModule, []).component([
'ng1Component',
{
transclude: true,
template: `
<ng-component-downgrade>
<div>
<!-- This produces an error -->
<ng-transclude></ng-transclude>
</div>
</ng-component-downgrade>
`
}
])
HTML
<div id="ajs-app-module" class="component">
<h1>Angular downgrade Transclusion Error</h1>
<div>
<h2>AngularJS Component</h2>
<ng1-component>
<!-- This is not visible -->
<div class="transcluded">Transcluded content</div>
</ng1-component>
</div>
<div>
<h2>Downgraded Angular Component</h2>
<ng-component-downgrade>
<!-- This is visible -->
<div class="transcluded">Transcluded content</div>
</ng-component-downgrade>
</div>
</div>
A reproduction of the Problem is here: Stackblitz
The produced error:
preview-a214a06f7a20.js:2 Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div ng-transclude="" class="ng-scope">
https://errors.angularjs.org/1.8.2/ngTransclude/orphan?p0=%3Cdiv%20ng-transclude%3D%22%22%20class%3D%22ng-scope%22%3E
at eval (angular.js:138)
at Object.ngTranscludePostLink (angular.js:35000)
at eval (angular.js:1391)
at invokeLinkFn (angular.js:11376)
at nodeLinkFn (angular.js:10695)
at compositeLinkFn (angular.js:9942)
at publicLinkFn (angular.js:9807)
at eval (downgrade_component_adapter.ts:50)
at Array.forEach (<anonymous>)
at DowngradeComponentAdapter.compileContents (downgrade_component_adapter.ts:49) '<div ng-transclude="" class="ng-scope">'
Environment:
Angular CLI: 11.2.14
Node: 14.18.2
OS: darwin x64
Angular: 11.2.14
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, upgrade
Ivy Workspace: Yes
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1102.14
@angular-devkit/build-angular 0.1102.14
@angular-devkit/core 11.2.14
@angular-devkit/schematics 11.2.14
@angular/cdk 11.2.13
@angular/material 11.2.13
@angular/material-moment-adapter 11.2.13
@schematics/angular 11.2.14
@schematics/update 0.1102.14
rxjs 6.6.3
typescript 4.1.6
webpack 4.44.2
angular 1.8.2