angular/angular-cli · critical

WebpackResourceLoader cannot be used without parentCompilati

Error message

WebpackResourceLoader cannot be used without parentCompilation

What it means

WebpackResourceLoader compiles Angular component resources (templates/styles) through a child webpack compilation. It requires a parent webpack Compilation to be attached via `setParentCompilation()` before any resource compilation can run; without it there is no compiler context, webpack module machinery, or output filesystem to use, so the loader refuses to proceed.

Source

Thrown at packages/ngtools/webpack/src/resource_loader.ts:114

  getAffectedResources(file: string): Iterable<string> {
    return this._reverseDependencies.get(file) || [];
  }

  setAffectedResources(file: string, resources: Iterable<string>): void {
    this._reverseDependencies.set(file, new Set(resources));
  }

  // eslint-disable-next-line max-lines-per-function
  private async _compile(
    filePath?: string,
    data?: string,
    fileExtension?: string,
    resourceType?: 'style' | 'template',
    containingFile?: string,
  ): Promise<CompilationOutput> {
    if (!this._parentCompilation) {
      throw new Error('WebpackResourceLoader cannot be used without parentCompilation');
    }

    const { context, webpack } = this._parentCompilation.compiler;
    const {
      EntryPlugin,
      NormalModule,
      library,
      node,
      sources,
      util: { createHash },
    } = webpack;

    const getEntry = (): string => {
      if (filePath) {
        return `${filePath}?${NG_COMPONENT_RESOURCE_QUERY}`;
      } else if (resourceType) {
        return (
          // app.component.ts-2.css?ngResource!=!@ngtools/webpack/src/loaders/inline-resource.js!app.component.ts

View on GitHub (pinned to bb72145f9a)

Solutions

1. Call `loader.setParentCompilation(compilation)` with the active webpack Compilation before invoking get()/compilationResult()
2. Ensure the loader instance you are using is the one managed by AngularCompilerPlugin, which wires the parent compilation automatically
3. If running outside webpack, do not use WebpackResourceLoader; use an alternative resource compiler (e.g. Jest/resource loader equivalents)
4. Check plugin hook ordering so the loader is not invoked before the parent compilation hook fires

Example fix

// before
const loader = new WebpackResourceLoader();
const output = await loader.get('./app.component.html');
// after
const loader = new WebpackResourceLoader();
loader.setParentCompilation(compilation); // from the active webpack build
const output = await loader.get('./app.component.html');

if (!loader || typeof loader.setParentCompilation !== 'function') throw new Error('Invalid WebpackResourceLoader');
loader.setParentCompilation(compilation); // must precede any get()/compilationResult() call

function isResourceLoaderReady(loader, compilation) {
  return !!loader && !!compilation && typeof loader.setParentCompilation === 'function';
}

try {
  loader.setParentCompilation(compilation);
  output = await loader.get(filePath);
} catch (e) {
  if (e.message.includes('cannot be used without parentCompilation')) {
    throw new Error('ResourceLoader used outside a webpack compilation lifecycle');
  }
  throw e;
}

When it happens

Trigger: Calling `get()`, `getEntry()`/`entry`, or `compilationResult()` (which routes into `_compile`) on a WebpackResourceLoader instance whose `setParentCompilation(compilation)` was never called, or was called on a stale instance after the compilation completed.

Common situations: Custom AngularCompilerPlugin/lifecycle hook integration where the loader is instantiated manually; using the resource loader outside a webpack build (e.g. in a custom transform or test harness); calling `get()` in a plugin hook that runs before the compilation is attached.

Related errors

• Attempted to load invalid Postcss plugin: "${pluginName}"
• ${analysis.errorMessage}
• Webpack stats build result is required.
• The "application" and "browser-esbuild" builders do not supp
• Only the "application" and "browser-esbuild" builders suppor

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