question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

some ViewContainerRef properties are missed in angular 9?

See original GitHub issue

🐞 bug report

embeddedViews prperty not available in angular 9 viewcontainerRef property and there is no alternate property also available

Is this a regression?

yes

Description

This is my script condition in my source level which is working fine in angular 7 and 8,

if (this.isNgTemplate()) {
            let items = this.listViewInstance.element.querySelectorAll('.' + classNames.listItem);
            for (let index = 0; index < items.length; index++) {
                items[index].context = this.listViewInstance.viewContainerRef._embeddedViews[index].context;
            }

But throws script error in angular 9, if i disbale ivy working fine.

Validation details

I have validated and find root cause of my issue. in angular 7, viewcontainerRef property looks like below which has embeddedViews property so my script works fine.

image

But in angular 9, there is no embeddedViews property, viewcontainer property looks like beloe:

image

🔬 Minimal Reproduction

Working sample

  • Angular 7 sample - Angular 7-ListView.zip

  • download above sample

  • Give npm i and then give ng serve

  • you will see no script error in console

issue reproducing sample

🌍 Your Environment

Angular Version:


"@angular/animations": "~9.0.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
 "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "~9.0.1",
    "@angular/compiler-cli": "~9.0.0",
    "@angular/language-service": "~9.0.0",

Anything else relevant? when disale IVY, there is now console error.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
kumaresan-subramanicommented, May 13, 2020

_embeddedViews is a private API so while you might have seen it under debugger, this is not the contract you can use in your application. If you want to get a view from a ViewContainerRef you can use the get method: https://angular.io/api/core/ViewContainerRef

Thanks @pkozlowski-opensource , this comment solve my issue but i haven’t check properly at my end. Due cache problem this takes time

1reaction
kumaresan-subramanicommented, May 13, 2020

@pkozlowski-opensource , please check below which will help you to find cause or something?

repro stesp

reason

In my source, i have used embededview api to get component view and update my component native element template property.

details

in below, i am updating template values to my created element using embededview api image

after updating template value from embedded views, my element items looks like below

image

above template values has been taken from this.listViewInstance.viewContainerRef._embeddedViews

image

But in angular9, i didn’t get any reference so that i am not able to update my element template values

Read more comments on GitHub >

github_iconTop Results From Across the Web

ViewContainerRef - Angular
A view container instance can contain other view containers, creating a view hierarchy. Propertieslink. Property, Description. abstract element: ElementRef ...
Read more >
Cannot read property 'viewContainerRef' of undefined
In my case, it was Angular 9 and the directive's selector was inside *ngIf . ... hostContainer.clear(); // CLEAR ANY INJECTED COMPONENT IF ......
Read more >
Understanding ViewChildren, ContentChildren, and QueryList ...
Let's see how we can handle this with Angular. @ViewChildren —. Returns the specified elements or directives from the view DOM as QueryList....
Read more >
Angular Dynamic Components: Building a Dialog System
We do so by getting the ViewContainerRef of the directive (we added that property to the directive before) and using it to create...
Read more >
48 answers on StackOverflow to the most popular Angular ...
If the result of an HTTP request to a server or some other expensive ... Can't bind to 'ngModel' since it isn't a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found