Skip to content
This repository was archived by the owner on Sep 16, 2022. It is now read-only.

NgIf initiated by an ComponentFactory thows an error when trying to copy an NgContent #1943

@valakis

Description

@valakis

I have a Component which is used as a “redirection route”. The purpose of the component is to load another component (in this code sample InnerComponent). If loading that component happens via DynamicComponent an error is thrown. If InnerComponent is instantiated from the template of AppCmp with the component’s selector, all is fine.

Note: this issue arises when the component being instantiated uses <ng-content></ng-content>.

html_dart2js.dart:39942 EXCEPTION: RangeError (index): Index out of range: no indices are valid: 0
STACKTRACE:
dart:sdk_internal 12055:21                                                          _get]
main.template.dart 196:59                                                           build
package:angular/src/core/linker/views/embedded_view.dart 80:5                       create
package:angular/src/core/linker/template_ref.dart 34:9                              createEmbeddedView
package:angular/src/core/linker/view_container.dart 112:32                          createEmbeddedView
package:angular/src/common/directives/ng_if.dart 51:22                              set ngIf
main.template.dart 157:23                                                           detectChangesInternal
package:angular/src/core/linker/views/view.dart 110:7                               detectCrash
package:angular/src/core/linker/views/component_view.dart 144:7                     detectChanges
package:angular/src/core/linker/views/host_view.dart 186:19                         detectChangesInternal
package:angular/src/core/linker/views/view.dart 110:7                               detectCrash
package:angular/src/core/linker/views/host_view.dart 148:7                          detectChanges
package:angular/src/core/linker/view_container.dart 80:15                           detectChangesInNestedViews
package:angular_components/dynamic_component/dynamic_component.template.dart 59:19  detectChangesInternal

My workaround was to wrap the InnerComponent with another one , then it works properly.

  • Dart SDK version: 2.10.4 (stable) (Unknown timestamp) on "linux_x64"
  • AngularDart Version 6.0.1
  • Tried on Linux and on Windows too
  • Tested on Chrome and on Firefox
import 'package:angular/angular.dart';
import 'package:angular_components/dynamic_component/dynamic_component.dart';
import 'main.template.dart' as ng;
void main() {
  runApp(ng.AppCmpNgFactory);
}
@Component(selector: 'app', template: '''
       <dynamic-component [componentFactory]="renderer"></dynamic-component>
    ''', directives: [DynamicComponent])
class AppCmp {
  static final ComponentFactory renderer = ng.InnerComponentNgFactory;
}
@Component(
    selector: 'inner',
    template: '<template [ngIf]="true"><ng-content></ng-content></template>',
    directives: [NgIf])
class InnerComponent {}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions