angular/angular · error · RuntimeError

JSONP_WRONG_METHOD

JSONP_WRONG_METHOD

Error message

JSONP requests must use JSONP request method.

What it means

The translation loader tries each registered parser's analyze() pass; if none can handle the file (unsupported format, wrong content for the extension, empty or corrupt file), it throws this error and appends each parser's analysis diagnostics explaining why every format rejected it.

Source

Thrown at packages/common/http/src/jsonp.ts:134

  /**
   * Get the name of the next callback method, by incrementing the global `nextRequestId`.
   */
  private nextCallback(): string {
    return `ng_jsonp_callback_${nextRequestId++}`;
  }

  /**
   * Processes a JSONP request and returns an event stream of the results.
   * @param req The request object.
   * @returns An observable of the response events.
   *
   */
  handle(req: HttpRequest<never>): Observable<HttpEvent<any>> {
    // Firstly, check both the method and response type. If either doesn't match
    // then the request was improperly routed here and cannot be handled.
    if (req.method !== 'JSONP') {
      throw new RuntimeError(
        RuntimeErrorCode.JSONP_WRONG_METHOD,
        ngDevMode && JSONP_ERR_WRONG_METHOD,
      );
    } else if (req.responseType !== 'json') {
      throw new RuntimeError(
        RuntimeErrorCode.JSONP_WRONG_RESPONSE_TYPE,
        ngDevMode && JSONP_ERR_WRONG_RESPONSE_TYPE,
      );
    }

    // Check the request headers. JSONP doesn't support headers and
    // cannot set any that were supplied.
    if (req.headers.keys().length > 0) {
      throw new RuntimeError(
        RuntimeErrorCode.JSONP_HEADERS_NOT_SUPPORTED,
        ngDevMode && JSONP_ERR_HEADERS_NOT_SUPPORTED,
      );
    }

View on GitHub (pinned to 51cb07e980)

Solutions

1. Read the appended per-parser messages to see why each format (XLIFF 1.2, XLIFF 2.0, XTB, JSON, ARB) rejected the file
2. Convert the file to a supported format and make the extension match the content
3. Verify the configured path actually points at your translation files and that they are non-empty and well-formed

Example fix

// before (angular.json)
"locales": { "fr": "src/locale/messages.fr.csv" }

// after
"locales": { "fr": "src/locale/messages.fr.xlf" }

const SUPPORTED_EXTENSIONS = ['.xlf', '.xlf2', '.xtb', '.json', '.arb'];
function looksLoadable(path: string, contents: string): boolean {
  const ext = path.slice(path.lastIndexOf('.'));
  if (!SUPPORTED_EXTENSIONS.includes(ext)) return false;
  if (contents.trim().length === 0) return false;
  if (ext === '.json' || ext === '.arb') {
    try { JSON.parse(contents); return true; } catch { return false; }
  }
  return contents.trimStart().startsWith('<?xml') || contents.includes('<');
}

function isSupportedTranslationFile(path: string): boolean {
  return ['.xlf', '.xlf2', '.xtb', '.json', '.arb'].some((ext) => path.endsWith(ext));
}

try {
  const bundles = loader.loadBundles(filePaths, locales);
} catch (e) {
  if (e instanceof Error && e.message.includes('no "TranslationParser"')) {
    // check the appended per-parser reasons; convert the file or fix the path/extension
  } else throw e;
}

When it happens

Trigger: Pointing the localization build at an unsupported file: a .txt/.csv 'translation file', a JSON file not in the Angular translations shape, a 0-byte or truncated XLIFF, or content whose extension does not match its actual format.

Common situations: Wrong path or glob in the angular.json locales config; downloading translations from a TMS in the wrong format; saving a file with the wrong extension; empty files from failed exports.

Related errors

• FETCH_UPLOAD_PROGRESS_NOT_SUPPORTED
• FETCH_RESPONSE_BODY_TOO_LARGE
• Unexpected value of the `${key}` header provided. Expecting
• found start event for frame capture, but frame capture was n
• missing start event for frame capture

AI-assisted analysis of angular/angular@51cb07e980 (2026-08-22). Data as JSON: /api/errors/e4882f237c7730c2. Report an issue: GitHub.