fix(router): add error message when using loadComponent with a NgModule (#49164)

IvanNavarroCode · AndrewKushnir · commit 7e35a917c56e · 2023-02-27T10:09:55.000-08:00
Add a more specific error message when defining a lazy-loaded route using `loadComponent` and passing it a NgModule instead of a standalone component, when the user should actually be using `loadChildren`. PR Close #49164
diff --git a/packages/core/src/core_render3_private_export.ts b/packages/core/src/core_render3_private_export.ts
@@ -248,6 +248,9 @@ export {
 export {
   compilePipe as ɵcompilePipe,
 } from './render3/jit/pipe';
+export {
+  isNgModule as ɵisNgModule
+} from './render3/jit/util';
 export { Profiler as ɵProfiler, ProfilerEvent as ɵProfilerEvent } from './render3/profiler';
 export {
   publishDefaultGlobalUtils as ɵpublishDefaultGlobalUtils
diff --git a/packages/router/src/utils/config.ts b/packages/router/src/utils/config.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {createEnvironmentInjector, EnvironmentInjector, isStandalone, Type, ɵRuntimeError as RuntimeError} from '@angular/core';
+import {createEnvironmentInjector, EnvironmentInjector, isStandalone, Type, ɵisNgModule as isNgModule, ɵRuntimeError as RuntimeError} from '@angular/core';
 
 import {EmptyOutletComponent} from '../components/empty_outlet';
 import {RuntimeErrorCode} from '../errors';
@@ -57,7 +57,13 @@ export function validateConfig(
 }
 
 export function assertStandalone(fullPath: string, component: Type<unknown>|undefined) {
-  if (component && !isStandalone(component)) {
+  if (component && isNgModule(component)) {
+    throw new RuntimeError(
+        RuntimeErrorCode.INVALID_ROUTE_CONFIG,
+        `Invalid configuration of route '${
+            fullPath}'. You are using 'loadComponent' with a module, ` +
+            `but it must be used with standalone components. Use 'loadChildren' instead.`);
+  } else if (component && !isStandalone(component)) {
     throw new RuntimeError(
         RuntimeErrorCode.INVALID_ROUTE_CONFIG,
         `Invalid configuration of route '${fullPath}'. The component must be standalone.`);
diff --git a/packages/router/test/standalone.spec.ts b/packages/router/test/standalone.spec.ts
@@ -337,6 +337,23 @@ describe('standalone in Router API', () => {
          TestBed.inject(Router).navigateByUrl('/home');
          expect(() => advance(root)).toThrowError(/.*home.*component must be standalone/);
        }));
+
+    it('throws error when loadComponent is used with a module', fakeAsync(() => {
+         @NgModule()
+         class LazyModule {
+         }
+
+         TestBed.configureTestingModule({
+           imports: [RouterTestingModule.withRoutes([{
+             path: 'home',
+             loadComponent: () => LazyModule,
+           }])],
+         });
+
+         const root = TestBed.createComponent(RootCmp);
+         TestBed.inject(Router).navigateByUrl('/home');
+         expect(() => advance(root)).toThrowError(/.*home.*Use 'loadChildren' instead/);
+       }));
   });
   describe('default export unwrapping', () => {
     it('should work for loadComponent', async () => {
