Skip to content

unit-test fails when consuming libraries depend on monaco-editor (ESM CSS imports) #33509

Description

@Carlosamouco

Command

test

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

No response

Description

Importing monaco-editor inside an Angular library causes unit tests to fail in a consuming application when using @angular/build:unit-test.

This happens in a cross-workspace setup where:

  • the library is built in a separate workspace
  • it is installed into the app using npm install --install-links
  • the app runs unit tests with @angular/build:unit-test

Problem

monaco-editor ESM builds import CSS internally, e.g.:

monaco-editor/esm/vs/base/browser/ui/aria/aria.css

During unit test execution this leads to:

TypeError: Unknown file extension ".css"

Minimal Reproduction

Workspace A — Create and build the library

1. Create a new Angular workspace (library source)

ng new monaco-lib-workspace --no-create-application
cd monaco-lib-workspace

2. Generate an Angular library

ng generate library my-lib

3. Install monaco-editor in the library workspace

npm install monaco-editor

4. Import monaco-editor inside the library

In projects/my-lib/src/lib/my-lib.service.ts:

import * as monaco from 'monaco-editor';

export class MyLibService {
  getMonaco() {
    return monaco;
  }
}

5. Build the library

ng build my-lib


Workspace B — Use the library

6. Create a second Angular application workspace

ng new monaco-app --defaults
cd monaco-app

7. Install the built library using --install-links

npm install ../monaco-lib-workspace/dist/my-lib --install-links

8. Use the library in the app

In src/app/app.component.ts:

import { MyLibService } from 'my-lib';

const service = new MyLibService();
console.log(service.getMonaco());

9. Run unit tests

ng test

Exception or Error

Tests fail with:

TypeError: Unknown file extension ".css" for .../node_modules/monaco-editor/esm/vs/base/browser/ui/aria/aria.css

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI       : 22.0.5
Angular           : 22.0.5
Node.js           : 24.16.0
Package Manager   : npm 11.13.0
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 22.0.5            │ ^22.0.5           │
│ @angular/cli              │ 22.0.5            │ ^22.0.5           │
│ @angular/common           │ 22.0.5            │ ^22.0.5           │
│ @angular/compiler         │ 22.0.5            │ ^22.0.5           │
│ @angular/compiler-cli     │ 22.0.5            │ ^22.0.5           │
│ @angular/core             │ 22.0.5            │ ^22.0.5           │
│ @angular/forms            │ 22.0.5            │ ^22.0.5           │
│ @angular/localize         │ 22.0.5            │ ^22.0.5           │
│ @angular/platform-browser │ 22.0.5            │ ^22.0.5           │
│ @angular/router           │ 22.0.5            │ ^22.0.5           │
│ @angular/service-worker   │ 22.0.5            │ ^22.0.5           │
│ ng-packagr                │ 22.0.1            │ ^22.0.1           │
│ rxjs                      │ 7.8.2             │ ~7.8.2            │
│ typescript                │ 6.0.3             │ ^6.0.3            │
│ vitest                    │ 4.1.9             │ ^4.1.9            │
│ zone.js                   │ 0.16.2            │ ^0.16.2           │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions