Angular 18.2.10: inject() Fails in Resolver

Question:

I'm using Angular 18.2.10 and defining routes with loadComponent for lazy loading. I have a wrapper component that should wrap all child routes.

However, when I use loadComponent without component, I get this error:

ERROR RuntimeError: NG04014: Invalid configuration of route 'some-route/': routes must have either a path or a matcher specified

What I Found:

✅ If I add both loadComponent and component for path '', the error disappears, but this doesn't seem right.

✅ inject(HttpClient) in a resolver works fine, but inject(SomeService) fails.

Minimal Reproducible Example

export const APP_ROUTES: Routes = [
{
path: '',
loadChildren: () => import('./some.routes').then(m => m.SOME_ROUTES)
}
];



export const SOME_ROUTES: Routes = [
{
path: '',
loadComponent: () => import('./wrapper.component').then(m => m.WrapperComponent),
// component: WrapperComponent, // ✅ uncomment this the error disappears
children: [
{
path: '',
loadComponent: () => import('./list.component').then(m => m.ListComponent),
resolve: {
data: dataResolver, // Triggers NG04014
},
},
{
path: ':id',
loadComponent: () => import('./details.component').then(m => m.DetailsComponent),
},
],
},
];

export const dataResolver: ResolveFn<any> = () => {
const service = inject(SomeService); // ❌ Causes NG04014 when used with loadComponent
return service.getData();
};


Environment Details:

Angular: 18.2.10

RxJS: 7.8.1

TypeScript: 5.5.4

Zone.js: 0.14.10

Is this an Angular 18 bug, or am I configuring the routes incorrectly?

Edited

@Injectable({
providedIn: 'root'
})
export class SomeService {
getData() {
return 'Some data';
}
}

Continue reading...