Skip to content

Builder produces wrong minified code. #32298

@Carlosamouco

Description

@Carlosamouco

Command

build

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

I was trying to setup monaco-editor using the ESM version.

I managed to setup the monaco-editor web workers and it seamed to work mostly fine. However when I built the app using the application builder, the monaco *.css files were not loaded. Fortunately, there is a bundle with the styles in the AMD version that I was able to include in the application. Non the less, I am concerned that these will soon be removed, since the AMD version is deprecated, and we will no longer be able to use monaco with angular.

After managing this problems, I was testing the built code and it seams the generated minified code does not match the development code and breaks.

This is the original monaco code:

try {
    for await(const item of this._asyncIterable) {
        if (item) {
            this._result.push(item);
            this._fireResult(options);
        }
    }
    this._asyncIterableDone = true;
    if (this._state === 3 /* HoverOperationState.WaitingForAsync */
    || this._state === 4 /* HoverOperationState.WaitingForAsyncShowingLoading */
    ) {
        this._setState(0 /* HoverOperationState.Idle */
        , options);
    }
} catch (e) {
    onUnexpectedError(e);
}

This is the unminified generated code:

try {
  try {
    for (var iter = __forAwait(this._asyncIterable), more, temp, error; more = !(temp = yield iter.next()).done; more = false) {
      const item = temp.value;
      if (item) {
        this._result.push(item);
        this._fireResult(options);
      }
    }
  } catch (temp) {
    error = [temp];
  } finally {
    try {
      more && (temp = iter.return) && (yield temp.call(iter));
    } finally {
      if (error)
        throw error[0];
    }
  }
  this._asyncIterableDone = true;
  if (this._state === 3 || this._state === 4) {
    this._setState(0, options);
  }
} catch (e) {
  onUnexpectedError(e);
}

This is the minified code:

try {
    try {
        for (var t = fs(this._asyncIterable), i, n, s; i = !(n = yield t.next()).done; i = !1) {
            let r = n.value;
            r && (this._result.push(r),
            this._fireResult(e))
        }
    } catch {
        s = [n]
    } finally {
        try {
            i && (n = t.return) && (yield n.call(t))
        } finally {
            if (s)
                throw s[0]
        }
    }
    this._asyncIterableDone = !0,
    (this._state === 3 || this._state === 4) && this._setState(0, e)
} catch (r) {
    ye(r)
}

There is an important difference between the development code and production code:

catch {
    s = [n]
}

catch (temp) {
  error = [temp];
}

The n variable is never assigned and is undefined, giving an error later on in the code.

Can we also address the fact *.css files are correctly loaded with vite in the development server and not using the application builder? The css is bundled but there is no code importing it.

Minimal Reproduction

  1. Install monaco-editor
  2. Build the application in production,
  3. Check the generated chunks.

Exception or Error


Your Environment


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

Angular CLI       : 21.1.0
Angular           : 21.1.0
Node.js           : 24.12.0
Package Manager   : npm 11.6.2
Operating System  : linux x64

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                           │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations               │ 21.1.0            │ ^21.1.0           │
│ @angular/build                    │ 21.1.0            │ ^21.1.0           │
│ @angular/cli                      │ 21.1.0            │ ^21.1.0           │
│ @angular/common                   │ 21.1.0            │ ^21.1.0           │
│ @angular/compiler                 │ 21.1.0            │ ^21.1.0           │
│ @angular/compiler-cli             │ 21.1.0            │ ^21.1.0           │
│ @angular/core                     │ 21.1.0            │ ^21.1.0           │
│ @angular/forms                    │ 21.1.0            │ ^21.1.0           │
│ @angular/localize                 │ 21.1.0            │ ^21.1.0           │
│ @angular/platform-browser         │ 21.1.0            │ ^21.1.0           │
│ @angular/platform-browser-dynamic │ 21.1.0            │ ^21.1.0           │
│ @angular/router                   │ 21.1.0            │ ^21.1.0           │
│ @angular/service-worker           │ 21.1.0            │ ^21.1.0           │
│ ng-packagr                        │ 21.0.1            │ ^21.0.1           │
│ rxjs                              │ 7.8.2             │ ~7.8.2            │
│ typescript                        │ 5.9.3             │ ^5.9.3            │
│ vitest                            │ 4.0.17            │ ^4.0.8            │
│ zone.js                           │ 0.16.0            │ 0.16.0            │
└───────────────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions