What causes "*" in angular/angular-cli?

Read the accompanying console.warn text to identify the specific CSS asset/CSS rule Critters complained about.

*

Error message

What it means

During SSR HTML rendering, the CLI/server may inline critical CSS using Critters. Critters' internal logger is bridged to `console.warn`/`console.error`, so any Critters warning (message shown as `"*"` placeholder here) surfaces as a raw console warning while inlining critical CSS.

Source

Thrown at packages/angular/ssr/src/utils/inline-critical-css.ts:106

// the `Beasties` types which means that we can't call the `super` implementation.
interface BeastiesBase {
  embedLinkedStylesheet(link: PartialHTMLElement, document: PartialDocument): Promise<unknown>;
}
class BeastiesBase extends Beasties {}
/* eslint-enable @typescript-eslint/no-unsafe-declaration-merging */

export class InlineCriticalCssProcessor extends BeastiesBase {
  private addedCspScriptsDocuments = new WeakSet<PartialDocument>();
  private documentNonces = new WeakMap<PartialDocument, string | null>();

  constructor(
    public override readFile: (path: string) => Promise<string>,
    readonly outputPath?: string,
  ) {
    super({
      logger: {
        // eslint-disable-next-line no-console
        warn: (s: string) => console.warn(s),
        // eslint-disable-next-line no-console
        error: (s: string) => console.error(s),
        info: () => {},
      },
      logLevel: 'warn',
      path: outputPath,
      publicPath: undefined,
      compress: false,
      pruneSource: false,
      reduceInlineStyles: false,
      mergeStylesheets: false,
      // Note: if `preload` changes to anything other than `media`, the logic in
      // `embedLinkedStylesheet` will have to be updated.
      preload: 'media',
      noscriptFallback: true,
      inlineFonts: true,
    });
  }

View on GitHub (pinned to bb72145f9a)

Solutions

Read the accompanying console.warn text to identify the specific CSS asset/CSS rule Critters complained about.
Rebuild so CSS assets match `outputPath`, and verify referenced stylesheets exist in the server output.
If the warning is benign (e.g. non-critical font), adjust inline-critical-css options or disable inlining for that route.

Example fix

// before (server config)
inlineCriticalCss: true // with mismatched outputPath
// after
// ensure outputPath points at the browser build output directory containing the CSS
inlineCriticalCss: true, outputPath: 'dist/my-app/browser'

Defensive patterns

Strategy: fallback

Validate before calling

// verify CSS assets exist where outputPath points before SSR render
import { existsSync } from 'fs';
if (outputPath && !existsSync(outputPath)) console.warn('inline-critical-css outputPath missing; CSS warnings likely');

Try / catch

// bridge Critters warnings into app logs for visibility
console.warn = ((orig) => (s) => { logSsrWarning(s); orig(s); })(console.warn);

Prevention

Keep `outputPath` pointing at the directory containing built CSS.
Rebuild assets after CSS changes before SSR smoke tests.
Review Critters warnings in CI SSR render checks instead of ignoring console output.

When it happens

Trigger: Server-side rendering a page with stylesheets when the Critters `InlineCriticalCssProcessor` encounters issues such as unresolvable stylesheet paths, malformed CSS, or missing files relative to `outputPath`.

Common situations: Missing or renamed CSS assets after a build, custom `outputPath` mismatch, inline styles Critters cannot analyze, or fonts/imports Critters can't inline.

Related errors

AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30). Data as JSON: /api/errors/bf9558c24d9848d1. Report an issue: GitHub.