bug(cdk/layout): Circular dependency in DI detected for InjectionToken CSP nonce.

[PuffPastry]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

15

Description

This seems a very odd issue.

I have an older app that was building well in v15, which I recently have been attempting to upgrade to v19. This caused it to run into the issue that no routes can be build (even though I have set the serverRoutes to RenderMode.Client).

The error that always pops up on first render when running the app with ng serve is

ERROR RuntimeError: NG0200: Circular dependency in DI detected for InjectionToken CSP nonce. Find more at https://angular.dev/errors/NG0200
    at throwCyclicDependencyError (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:1401:9)
    at R3Injector.hydrate (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:2186:9)
    at R3Injector.get (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:2085:23)
    at injectInjectorOnly (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:1476:36)
    at ɵɵinject (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:1482:59)
    at Object.SharedStylesHost_Factory (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ULZ52YRG.js:442:103)
    at eval (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:2191:35)
    at runInInjectorProfilerContext (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:1344:5)
    at R3Injector.hydrate (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:2190:11)
    at R3Injector.get (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:2085:23) {
  code: -200
}
Error: NG0210: The document object is not available in this context. Make sure the DOCUMENT injection token is provided.
    at getDocument (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:5720:9)
    at Object.factory (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:5738:12)
    at eval (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:2191:35)
    at runInInjectorProfilerContext (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:1344:5)
    at R3Injector.hydrate (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:2190:11)
    at R3Injector.get (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:2085:23)
    at injectInjectorOnly (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:1476:36)
    at ɵɵinject (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:1482:59)
    at inject (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-ZMU7LZMM.js:1491:10)
    at _MediaMatcher.<instance_members_initializer> (/path/to/project/.angular/cache/19.1.8/portal/vite/deps_ssr/chunk-LJJNQH74.js:51:18)```

I cannot for the life of me figure out why the csp nonce is not being injected properly, or whether this is an issue coming from another component. 

After the first render fails in ng serve, the app runs perfectly afterwards.

### Reproduction

the stackblitz doesn't let me build with v19

### Expected Behavior

no errors

### Actual Behavior

see above stack trace

### Environment

- Angular: v19.x
- CDK/Material: v19.x
- Browser(s): All
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

Is the CDK layout mentioned in any errors? I don't see anything CDK-related in the stack trace.

[PuffPastry]

The MediaMatcher is getting the csp nonce injected, triggering the error consistently

[crisbeto]

I suspect the circular import might be somewhere else, but is showing up at the CSP_NONCE for some reason. The reason why I'm skeptical about the nonce being the issue is that it doesn't do any DI so it's not possible it would trigger the error. I'm skeptical it's the MediaMatcher either, because it only injects Platform and CSP_NONCE. This is a bit hard to investigate, but I've seen it happen if you inject specific services inside ErrorHandler. Do you happen to have a custom ErrorHandler?

[guysenpai]

same issue

[PuffPastry]

I don't think it is a circular reference issue, the app runs fine after refreshing. I didn't have the error until v19 and it happens regardless of which server route type I choose. Figured it would be best here because of the MediaMatcher, maybe it needs to be asked in the main angular repo

[PuffPastry]

I'm going to attempt to remove all references to cdk/layout and see if it persists beyond that, or if the source of the document call changes

[PuffPastry]

Nevermind, the update to @angular/cli@19.2.1 came with an update to @angular/ssr. the issue has resolved itself. clear all caches if you do still receive the error, safari didn't clear by itself for me

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}