refactor(core): forbid rendering orphan components in local compilation mode (angular#51726)

Certain code patterns and tools in Google (and possibly 3P world) lead to the situation that a component is bootstrapped/rendered without its ng-module being loaded in the browser. Technically speaking this should be an anti-pattern since the ng-module could contain some runtime logic (e.g., providing something, calling some services, etc) and its not being loaded leads to unexpected behaviour. However, in many cases ng-module is an empty class and its only usage is for providing scope, and since in AoT full compilation mode we already hard-code dependencies into components so we can get away with not loading the ng-module. But in AoT local compilation mode it is not possible to get away since the component's dependencies are computed in runtime and the presence of the corresponding ng-module in the browser is needed. For this reason in this change it is forbidden to attempt to render a component without first loading its ng-module in local compilation mode and an explicit error message is created to make this situation clear. This error message can help with catching such cases when running TGP in Google.

It would be an interesting question as to whether to ban this situation in full compilation mode as well, as it is error prone and these errors are sometimes very hard to debug.

PR Close angular#51726

Author: pmvald

goldens/public-api/core/errors.md

@@ -117,6 +117,8 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     RUNTIME_DEPS_INVALID_IMPORTED_TYPE = 1000,
     // (undocumented)
+    RUNTIME_DEPS_ORPHAN_COMPONENT = 1001,
+    // (undocumented)
     SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT = 600,
     // (undocumented)
     TEMPLATE_STRUCTURE_ERROR = 305,

packages/core/src/errors.ts

@@ -113,6 +113,7 @@ export const enum RuntimeErrorCode {
 
   // Runtime dependency tracker errors
   RUNTIME_DEPS_INVALID_IMPORTED_TYPE = 1000,
+  RUNTIME_DEPS_ORPHAN_COMPONENT = 1001,
 }
 
 

packages/core/src/render3/deps_tracker/deps_tracker.ts

@@ -85,7 +85,10 @@ class DepsTracker implements DepsTrackerApi {
       };
     } else {
       if (!this.ownerNgModule.has(type)) {
-        return {dependencies: []};
+        throw new RuntimeError(
+            RuntimeErrorCode.RUNTIME_DEPS_ORPHAN_COMPONENT,
+            `Orphan component found! Trying to render the component ${
+                type.name} without first loading the NgModule that declares it. Make sure that you import the component's NgModule in the NgModule or the standalone component in which you are trying to render this component. Also make sure the way the app is bundled and served always includes the component's NgModule before the component.`);
       }
 
       const scope = this.getNgModuleScope(this.ownerNgModule.get(type)!);

packages/core/test/render3/deps_tracker_spec.ts

@@ -948,14 +948,13 @@ describe('runtime dependency tracker', () => {
            ]));
          });
 
-      it('should return empty deps if component has no registered module', () => {
+      it('should throw orphan component error if component has no registered module', () => {
         @Component({})
         class MainComponent {
         }
 
-        const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>);
-
-        expect(ans.dependencies).toEqual([]);
+        expect(() => depsTracker.getComponentDependencies(MainComponent as ComponentType<any>))
+            .toThrowError(/Orphan component found! Trying to render the component MainComponent/);
       });
 
       it('should return empty deps if the compilation scope of the declaring module is corrupted',