Skip to content

Commit

Permalink
fix(router): add error message when using loadComponent with a NgModu…
Browse files Browse the repository at this point in the history
…le (#49164)

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
  • Loading branch information
Ivnosing authored and AndrewKushnir committed Feb 27, 2023
1 parent 138b493 commit 3062442
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 2 deletions.
3 changes: 3 additions & 0 deletions packages/core/src/core_render3_private_export.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 8 additions & 2 deletions packages/router/src/utils/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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.`);
Expand Down
17 changes: 17 additions & 0 deletions packages/router/test/standalone.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down

0 comments on commit 3062442

Please sign in to comment.