Unexpected template type-checking error from Angular 9 upgrade

[msorens]

🐞 bug report

Affected Package

Unknown

Is this a regression?

Yes, the previous version in which this bug was not present was 8.2.14

Description

Working through issues upgrading from 8.2 to 9.0RC. I understand there is now template type-checking (woot!) but could use an assist figuring out what an error is trying to tell me:

ASSERTION ERROR: Should be one of Element but got ElementContainer.

The stack trace gives me one clue where to look (ProjectDetailsComponent_section_25_ng_container_2_Template (ng:///ProjectDetailsComponent.js:288:5)) but how do I go from that to something in my html file? I only have 2 <section> elements, not 25, for instance. And not sure what ng_container refers to... Is there any way I can see that intermediate file (ProjectDetailsComponent.js) ?

🔬 Minimal Reproduction

While I am not able to create a minimal reproduction, I believe my actual codebase (which is open-source) is sufficient to demonstrate the issue.

cd components/automate-ui
npm install
make unit | grep -v "does not exist in the state"

(That grep is just to filter out some unrelated noise.)

There are more than a dozen instances of the above error occurring.

🔥 Exception or Error

HeadlessChrome 79.0.3945 (Mac OS X 10.14.6) ProjectDetailsComponent when there are rules enables delete-rule button when a rule has edits pending FAILED
	Error: ASSERTION ERROR: Should be one of Element but got ElementContainer
	    at throwError (http://localhost:9876/_karma_webpack_/vendor.js:62870:11)
	    at assertEqual (http://localhost:9876/_karma_webpack_/vendor.js:62824:9)
	    at assertNodeOfPossibleTypes (http://localhost:9876/_karma_webpack_/vendor.js:64956:5)
	    at instantiateAllDirectives (http://localhost:9876/_karma_webpack_/vendor.js:74505:26)
	    at createDirectivesInstances (http://localhost:9876/_karma_webpack_/vendor.js:73815:5)
	    at ɵɵelementContainerStart (http://localhost:9876/_karma_webpack_/vendor.js:83135:9)
	    at ProjectDetailsComponent_section_25_ng_container_2_Template (ng:///ProjectDetailsComponent.js:288:5)
	    at executeTemplate (http://localhost:9876/_karma_webpack_/vendor.js:73772:9)
	    at renderView (http://localhost:9876/_karma_webpack_/vendor.js:73572:13)
	    at TemplateRef_.createEmbeddedView (http://localhost:9876/_karma_webpack_/vendor.js:76905:17)

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.8
Node: 12.13.1
OS: darwin x64

Angular: 9.0.0-rc.8
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.8
@angular-devkit/build-angular     0.900.0-rc.8
@angular-devkit/build-optimizer   0.900.0-rc.8
@angular-devkit/build-webpack     0.900.0-rc.8
@angular-devkit/core              9.0.0-rc.8
@angular-devkit/schematics        9.0.0-rc.8
@angular/cdk                      9.0.0-rc.7
@angular/material                 9.0.0-rc.7
@ngtools/webpack                  9.0.0-rc.8
@nguniversal/express-engine       8.2.6
@schematics/angular               9.0.0-rc.8
@schematics/update                0.900.0-rc.8
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

Anything else relevant?
I originally posted this on 2019.12.19 on gitter (https://gitter.im/angular/angular) and @alxhub responded: "That sounds like a bug in our compiler, @msorens. Can you send me your template?"

I thought it would be better to keep all the info on this together, so opening this issue instead of continuing on gitter.

Here is one of the template files in question:

https://github.com/chef/automate/blob/3303d0d3bee01e2bb9a1427f967c822e086f5fba/components/automate-ui/src/app/pages/project/details/project-details.component.html

(Just in case that branch becomes inaccessible, the file is unchanged from master:
https://github.com/chef/automate/blob/master/components/automate-ui/src/app/pages/project/details/project-details.component.html)

[msorens]

Just an FYI, that I did a fresh upgrade from 8.2 to the latest 9.0RC and the issue is still occurring. (I have updated my version info above.)

[alxhub]

I'm guessing this is i18n related. @AndrewKushnir have you seen this before?

[AndrewKushnir]

@alxhub I had a quick look at the template and it seems like there are no i18n attrs there.

@msorens, as you pointed out, the error is being thrown from the ProjectDetailsComponent_section_25_ng_container_2_Template function, which indicates that the issue is somewhere in this block. I didn't find any particular code that might trigger the error. Since there is a lot of logic in that template, could you please try to narrow down the part of template that is causing a problem (by removing bits of template until the error goes away and eventually find a minimum possible template that would trigger that error)? Having a smaller repro would help us investigate this issue further.

Thank you.

[alxhub]

@msorens, can you provide a branch (that's upgraded to Ivy) with instructions to reproduce the problem. Ideally that would involve running ngc directly and not the ng build wrapper, but I can work with either.