Pattern: Monaco Editor CDN loading caused TS2307 'Cannot find module ...

Documentation for Sessions

🎨 Pattern: Monaco Editor CDN loading caused TS2307 'Cannot find module ...

Date: 2026-02-26
Time: 12:54:29 UTC
Session: gspace1-142.17
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

Monaco Editor CDN loading caused TS2307 'Cannot find module monaco-editor'. How to provide types for a CDN-loaded library without installing the 40MB package?

Task: Not specified

🎯 Decision Made

Chosen:

Create minimal local type declarations covering only consumed APIs

Options Considered:

  1. Install monaco-editor as devDependency (40MB, provides types but never bundled)
  2. Create minimal local type declarations covering only consumed APIs
  3. Use @types/monaco-editor (doesn't exist as separate package)

💭 Reasoning

ROOT CAUSE: UxCodeEditorComponent used typeof import('monaco-editor') and import('monaco-editor').editor.IStandaloneCodeEditor for type references. Since Monaco is loaded via CDN script tag at runtime, there's no node_modules/monaco-editor for TypeScript to resolve. ADDITIONAL ISSUE: Angular's strict template compiler also rejected (window as Record<string, unknown>) because Window doesn't have an index signature. FIX: Created libs/libs-ux/ux-code-editor/src/lib/types/monaco.d.ts with 60 lines of minimal type declarations covering: MonacoNamespace, MonacoEditorNamespace, IStandaloneCodeEditor, IStandaloneDiffEditor, ITextModel, IStandaloneThemeData. Changed window cast to window as unknown as Record<string, unknown>. WHAT WOULD MAKE THIS WRONG: If we later need Monaco APIs beyond what's declared (e.g., TextModelResolvedOptions, IEditorDecorationsCollection), the .d.ts file needs extending. This is a maintenance burden. EARLY WARNING: If a developer writes import * from 'monaco-editor' in any file that's bundled, webpack will fail. Monaco MUST only be type-imported from our local declarations. CONVENTION: When CDN-loading any library, always create a local .d.ts with minimal types rather than installing the full package.

📁 Files Involved

🔗 Related

Auto-generated by MCP Smart Consolidation