Extended non-declared component template compilation fails w/ TS file entrypoints

🐞 bug report

Affected Package

The issue is caused by package @angular/compiler.

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular 8

Description

We implemented a customization process based on tsconfig.app.json#path:

• When building the default default app / project, just the sources of the default project are defined in the tsconfig.app.json#path section.
• When building the customized app / project, first the sources of the customized app and as a fallback the sources of the default project are defined in the tsconfig.app.json#path section.
• When extending a component of the default project, we create a new component and extend the one in the default project but do not export / declare the super component in any module anymore.

With Ivy, the recommended way to define included TS files is to use the entrypoints in tsconfig.app.json#files (instead of wildcard imports using tsconfig.app.json#include in NG <9):

WARNING in <...>\ng-ivy-cust\projects\my-app\src\app\mymodule\mymodule.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

The previous approach (tsconfig.app.json#include) now shows a warning for each component which is included but not used (i.e. overwritten using our customization).

When using tsconfig.app.json#files, the template of the super-component is compiled (even though it’s not exported or declared in any module) but other components aren’t detected for the super-component:

ERROR in projects/my-app/src/app/mymodule/mycomponent/mycomponent.component.ts:7:5 - error NG8001: 'app-mycomponent2' is not a known element:
1. If 'app-mycomponent2' is an Angular component, then verify that it is part of this module.
2. If 'app-mycomponent2' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

🔬 Minimal Reproduction

Here’s a repo with a minimum working example: https://github.com/alexrashed/ng-ivy-cust In the project my-custom-app the component Mycomponent3Component extends MycomponentComponent.

Steps to reproduce:

• npm install
• npm run start-custom
  • The project can’t be built (see above)
• Edit projects/my-custom-app/tsconfig.app.json:
  • Remove the “files” and “include” section and uncomment the “include” section after the “TODO”
• npm run start-custom
  • The project is built and served, but the include warnings are shown.

🔥 Exception or Error

ERROR in projects/my-app/src/app/mymodule/mycomponent/mycomponent.component.ts:7:5 - error NG8001: 'app-mycomponent2' is not a known element:
1. If 'app-mycomponent2' is an Angular component, then verify that it is part of this module.
2. If 'app-mycomponent2' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.5
Node: 12.16.0
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.5
@angular-devkit/build-angular     0.900.5
@angular-devkit/build-optimizer   0.900.5
@angular-devkit/build-webpack     0.900.5
@angular-devkit/core              9.0.5
@angular-devkit/schematics        9.0.5
@ngtools/webpack                  9.0.5
@schematics/angular               9.0.5
@schematics/update                0.900.5
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[alxhub]

Okay, after looking through the repro again I understand things completely at this point.

1. my-custom-app uses path mappings to override certain ES module names, so the actual program is assembled both from my-app and my-custom-app’s overridden files

2. the overridden mymodule.module.ts file from my-custom-app declares mycomponent3

3. mycomponent3 extends mycomponent, a component declared in the module which was overridden. Thus, mycomponent has no module in the program.

4. Ivy now attempts to compile mycomponent without a module, leading to template type-checking errors.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}