ng serve (@angular/build:dev-server) provides broken chunk files

[RaederDev]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

This is only an issue with the dev server as far as I can tell. My production build works fine. I declared a canActivate guard that is included too late in the chunk file causing some routes to break. I have included a heavily redacted chunk file below to explain the issue so only relevant code is included:

/* start of file with a bunch of code */

// src/app/shared/guards/auth-guard.ts
import { Router as Router3 } from "/@fs/Users/myuser/projects/redacted-frontend/angular/.angular/cache/20.0.2/redacted/vite/deps/@angular_router.js?v=cdbf4a34";
import { inject as inject5 } from "/@fs/Users/myuser/projects/redacted-frontend/angular/.angular/cache/20.0.2/redacted/vite/deps/@angular_core.js?v=cdbf4a34";

// src/app/shared/services/app-init-service.ts
import { inject as inject4, Injectable as Injectable4 } from "/@fs/Users/myuser/projects/redacted-frontend/angular/.angular/cache/20.0.2/redacted/vite/deps/@angular_core.js?v=cdbf4a34";
import { HttpErrorResponse } from "/@fs/Users/myuser/projects/redacted-frontend/angular/.angular/cache/20.0.2/redacted/vite/deps/@angular_common_http.js?v=cdbf4a34";

// src/app/auth/services/auth-service.ts
import { DOCUMENT, inject as inject3, Injectable as Injectable3 } from "/@fs/Users/myuser/projects/redacted-frontend/angular/.angular/cache/20.0.2/redacted/vite/deps/@angular_core.js?v=cdbf4a34";

// src/app/user/constants/user-routes.ts
var USER_ROUTES_PREFIX = "user";
var UserRoutes = {
  PROFILE: [USER_ROUTES_PREFIX, "profile"],
  SETTINGS: [USER_ROUTES_PREFIX, "settings"],
};
var userRoutes = [
  {
    path: UserRoutes.PROFILE.join("/"),
    loadComponent: () => import("/chunk-BY5FYYLS.js").then((m) => m.UserProfilePage),
    canActivate: [authGuard]
  },
  {
    path: UserRoutes.SETTINGS.join("/"),
    loadComponent: () => import("/chunk-H56AUES5.js").then((m) => m.UserSettingsPage),
    canActivate: [authGuard]
  },
];

/* more removed code */

// src/app/shared/guards/auth-guard.ts
import { filter, map, take } from "/@fs/Users/myuser/projects/redacted-frontend/angular/.angular/cache/20.0.2/redacted/vite/deps/rxjs.js?v=cdbf4a34";
var authGuard = () => {
  const appInitService = inject5(AppInitService);
  const storage = inject5(StorageService);
  const router = inject5(Router3);
  return appInitService.$appInitialized.pipe(filter((v) => v), take(1), map(() => {
    if (storage.getItem(StorageKey.AUTH_TOKEN)) {
      return true;
    }
    return router.createUrlTree(["/", ...AuthRoutes.WELCOME_LOGIN]);
  }));
};

/* end of file with a bunch of code */

As you can see userRoutes depends on authGuard to be set however it's declared later in the chunk file leading to the angular router throwing an Exception because undefined was passed instead of a canActivate guard.

This is an abbreviated version of the original source file:

import { Routes as NgRoutes } from '@angular/router';
import { authGuard } from '../../shared/guards/auth-guard';

export const USER_ROUTES_PREFIX = 'user';

export const UserRoutes = {
  PROFILE: [USER_ROUTES_PREFIX, 'profile'],
  SETTINGS: [USER_ROUTES_PREFIX, 'settings'],
};

export const userRoutes: NgRoutes = [
  {
    path: UserRoutes.PROFILE.join('/'),
    loadComponent: () =>
      import('../pages/user-profile-page/user-profile-page').then(m => m.UserProfilePage),
    canActivate: [authGuard],
  },
  {
    path: UserRoutes.SETTINGS.join('/'),
    loadComponent: () =>
      import('../pages/user-settings-page/user-settings-page').then(m => m.UserSettingsPage),
    canActivate: [authGuard],
  },
];

As you can see it's being imported correctly and should therefore be declared before the user routes in the chunk file.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 20.0.2
Node: 22.16.0
Package Manager: npm 10.9.2
OS: darwin arm64

Angular: 20.0.3
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2000.2
@angular-devkit/core         20.0.2
@angular-devkit/schematics   20.0.2
@angular/build               20.0.2
@angular/cdk                 20.1.2
@angular/cli                 20.0.2
@schematics/angular          20.0.2
rxjs                         7.8.2
typescript                   5.8.3
zone.js                      0.15.1

Anything else?

No response

[JeanMeche]

Hi, could you try to provide a minimal repro (via a stackblitz or a github repo) that reproduces this issue ?

[RaederDev]

While creating the reproduction I found the core issue being a circular dependency.

So it's not really a Angular issue however the current state is not ideal, it took me hours to hunt down what was causing this because the error message this particular type of circular dependency creates is very difficult to understand. I had to set breakpoints in Angular, read the Router source code and manually read chunk files. Do you think it would be possible to have Angular generate a user friendly error here? I know that is already a thing with dependencies you inject.

main.ts:5 ERROR TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')
    at R3Injector.get (root_effect_scheduler.mjs:1970:19)
    at getTokenOrFunctionIdentity (router2.mjs:3313:27)
    at router2.mjs:3553:21
    at Observable2._subscribe (defer.js:5:19)
    at Observable2._trySubscribe (Observable.js:38:25)
    at Observable.js:32:31
    at errorContext (errorContext.js:19:9)
    at Observable2.subscribe (Observable.js:23:9)
    at take.js:10:20
    at OperatorSubscriber2.<anonymous> (lift.js:10:28)

runCanActivate https://github.com/angular/angular/blob/9562b636e004293c8969d3b4268f3c80a85e88d9/packages/router/src/operators/check_guards.ts#L158
takes futureARS and then maps over canActivate which results in undefined being passed into getTokenOrFunctionIdentity which causes the hasOwnProperty error.

I recreated a reproduction here: https://github.com/RaederDev/angular-circular-dep-showcase/tree/main visiting the home page should throw the error in the console.

[JeanMeche]

The issue with circular imports is that they are resolved by the bundler itself.

Usually you can detect them with tools like madge.

[alan-agius4]

As suggesed above https://www.npmjs.com/package/madge is a great tool to view circular imports.