Angular-cli: [@angular-devkit/build-optimizer] causes runtime errors in Monaco Editor

[petermikitsh]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

The bug is not present in 0.8.9, but is present in 0.9.0-beta.0.

Description

Using 0.9.0-beta.0 (or later) versions of @angular-devkit/build-optimizer leads to the following runtime exceptions from monaco-editor:

🔬 Minimal Reproduction

https://github.com/petermikitsh/buildoptimizer-error

git clone https://github.com/petermikitsh/buildoptimizer-error
cd buildoptimizer-error
npm install
npm start

🔥 Exception or Error

errors.js:22 Uncaught Error: Cannot read property 'createKey' of undefined

TypeError: Cannot read property 'createKey' of undefined
    at RawContextKey.bindTo (contextkey.js:439)
    at new MessageController (messageController.js:34)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at withAllStandaloneServices (standaloneEditor.js:97)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'createKey' of undefined

TypeError: Cannot read property 'createKey' of undefined
    at RawContextKey.bindTo (contextkey.js:439)
    at new CodeActionModel (codeActionModel.js:168)
    at new QuickFixController (codeActionCommands.js:148)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'createKey' of undefined

TypeError: Cannot read property 'createKey' of undefined
    at RawContextKey.bindTo (contextkey.js:439)
    at FindController.CommonFindController [as constructor] (findController.js:79)
    at new FindController (findController.js:322)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'createKey' of undefined

TypeError: Cannot read property 'createKey' of undefined
    at RawContextKey.bindTo (contextkey.js:439)
    at new MarkerController (gotoError.js:297)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at withAllStandaloneServices (standaloneEditor.js:97)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'getState' of null

TypeError: Cannot read property 'getState' of null
    at new SelectionHighlighter (multicursor.js:780)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at withAllStandaloneServices (standaloneEditor.js:97)
    at Object.create (standaloneEditor.js:109)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'createInstance' of undefined

TypeError: Cannot read property 'createInstance' of undefined
    at new ParameterHintsController (parameterHints.js:28)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at withAllStandaloneServices (standaloneEditor.js:97)
    at Object.create (standaloneEditor.js:109)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'createKey' of undefined

TypeError: Cannot read property 'createKey' of undefined
    at RawContextKey.bindTo (contextkey.js:439)
    at new SnippetController2 (snippetController2.js:31)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at withAllStandaloneServices (standaloneEditor.js:97)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'createInstance' of undefined

TypeError: Cannot read property 'createInstance' of undefined
    at new SuggestController (suggestController.js:164)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at withAllStandaloneServices (standaloneEditor.js:97)
    at Object.create (standaloneEditor.js:109)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'createInstance' of undefined

TypeError: Cannot read property 'createInstance' of undefined
    at new AccessibilityHelpController (accessibilityHelp.js:55)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at withAllStandaloneServices (standaloneEditor.js:97)
    at Object.create (standaloneEditor.js:109)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'createKey' of undefined

TypeError: Cannot read property 'createKey' of undefined
    at RawContextKey.bindTo (contextkey.js:439)
    at StandaloneReferencesController.ReferencesController (referencesController.js:131)
    at new StandaloneReferencesController (standaloneReferenceSearch.js:26)
    at create (types.js:152)
    at InstantiationService._createInstance (instantiationService.js:126)
    at InstantiationService.createInstance (instantiationService.js:93)
    at StandaloneEditor.CodeEditorWidget [as constructor] (codeEditorWidget.js:209)
    at StandaloneEditor.StandaloneCodeEditor [as constructor] (standaloneCodeEditor.js:72)
    at new StandaloneEditor (standaloneCodeEditor.js:160)
    at eval (standaloneEditor.js:110)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
CodeEditorWidget @ codeEditorWidget.js:213
StandaloneCodeEditor @ standaloneCodeEditor.js:72
StandaloneEditor @ standaloneCodeEditor.js:160
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'getValue' of undefined

TypeError: Cannot read property 'getValue' of undefined
    at ColorDetector.isEnabled (colorDetector.js:73)
    at eval (colorDetector.js:44)
    at Emitter.fire (event.js:535)
    at new StandaloneEditor (standaloneCodeEditor.js:179)
    at eval (standaloneEditor.js:110)
    at withAllStandaloneServices (standaloneEditor.js:97)
    at Object.create (standaloneEditor.js:109)
    at eval (index.js:6)
    at Object../index.js (main.js:208)
    at __webpack_require__ (main.js:64)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
Emitter.fire @ event.js:542
StandaloneEditor @ standaloneCodeEditor.js:179
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'createKey' of undefined

TypeError: Cannot read property 'createKey' of undefined
    at RawContextKey.bindTo (contextkey.js:439)
    at new WordHighlighter (wordHighlighter.js:159)
    at createWordHighlighterIfPossible (wordHighlighter.js:411)
    at eval (wordHighlighter.js:419)
    at Emitter.fire (event.js:535)
    at new StandaloneEditor (standaloneCodeEditor.js:179)
    at eval (standaloneEditor.js:110)
    at withAllStandaloneServices (standaloneEditor.js:97)
    at Object.create (standaloneEditor.js:109)
    at eval (index.js:6)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
Emitter.fire @ event.js:542
StandaloneEditor @ standaloneCodeEditor.js:179
(anonymous) @ standaloneEditor.js:110
withAllStandaloneServices @ standaloneEditor.js:97
create @ standaloneEditor.js:109
(anonymous) @ index.js:6
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199
errors.js:22 Uncaught Error: Cannot read property 'getValue' of undefined

TypeError: Cannot read property 'getValue' of undefined
    at ColorDetector.isEnabled (colorDetector.js:73)
    at eval (colorDetector.js:51)
    at Emitter.fire (event.js:535)
    at eval (codeEditorWidget.js:171)
    at Emitter.fire (event.js:535)
    at Configuration.CommonEditorConfiguration._recomputeOptions (commonEditorConfig.js:100)
    at Configuration._onReferenceDomElementSizeChanged (configuration.js:247)
    at ElementSizeObserver.eval [as changeCallback] (configuration.js:222)
    at ElementSizeObserver.measureReferenceDomElement (elementSizeObserver.js:61)
    at ElementSizeObserver.observe (elementSizeObserver.js:42)
    at eval (errors.js:22)
(anonymous) @ errors.js:22
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:20
ErrorHandler.onUnexpectedError @ errors.js:34
onUnexpectedError @ errors.js:48
Emitter.fire @ event.js:542
(anonymous) @ codeEditorWidget.js:171
Emitter.fire @ event.js:535
CommonEditorConfiguration._recomputeOptions @ commonEditorConfig.js:100
Configuration._onReferenceDomElementSizeChanged @ configuration.js:247
(anonymous) @ configuration.js:222
ElementSizeObserver.measureReferenceDomElement @ elementSizeObserver.js:61
ElementSizeObserver.observe @ elementSizeObserver.js:42
Configuration.observeReferenceElement @ configuration.js:253
CodeEditorWidget.layout @ codeEditorWidget.js:850
(anonymous) @ index.js:12
./index.js @ main.js:208
__webpack_require__ @ main.js:64
(anonymous) @ client:2
0 @ main.js:7989
__webpack_require__ @ main.js:64
(anonymous) @ main.js:196
(anonymous) @ main.js:199

🌍 Your Environment

Angular CLI: 7.3.6
Node: 10.15.0
OS: darwin x64
Angular: undefined
... 

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.6 (cli-only)
@angular-devkit/build-optimizer   0.9.0-beta.0
@angular-devkit/core              7.3.6 (cli-only)
@angular-devkit/schematics        7.3.6 (cli-only)
@schematics/angular               7.3.6 (cli-only)
@schematics/update                0.13.6 (cli-only)
typescript                        3.0.3
webpack                           4.29.6

Anything else relevant?

[fabio-scala]

Facing the same issue, did anyone figure out how to solve/workaround this?

[fabio-scala]

The scrub file transformer is the one which causes the issue, if that's of any help. Looking at the error I think monaco has it's own dependency injection mechanism based on constructor args. Might be affected by optimization here?

[fabio-scala]

For anyone interested in a workaround, I'm patching the webpack configuration using @angular-builders/custom-webpack to exclude the monaco files:

extra-webpack-config.js

module.exports = (webpackConfig, cliConfig) => {
  if (cliConfig.buildOptimizer) {
    // https://github.com/angular/angular-cli/issues/14033
    const loader = webpackConfig.module.rules
      .find(rule => rule.use && rule.use
        .find(it => it.loader === '@angular-devkit/build-optimizer/webpack-loader'));

    const originalTest = loader.test;
    loader.test = (file) => {
      const isMonaco = !!file.match('node_modules/monaco-editor');
      return !isMonaco && !!file.match(originalTest);
    };
  }
  return webpackConfig;
};

[clydin]

Does this still occur with the latest version of the CLI (currently 8.3.5)?

[petermikitsh]

@clydin The root of the issue is in the @angular-devkit/build-optimizer module.

I have upgraded the repo demonstrating this bug (https://github.com/petermikitsh/buildoptimizer-error/tree/upgrade-buildoptimizer) to the latest version of the build-optimizer.

The bug is still present.

[wszgrcy]

me too!
and I use with library,so I can't use @angular-builders/custom-webpack to solve this problems

[maxtacco]

I had to adjust @fabioscala answer a little bit to get it to work with Angular 8:

const webpack = require('webpack');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

const findLoader = (webpackConfig, regex) => {
  return webpackConfig.module.rules
    .filter(rule => !!rule.use)
    .find(rule => rule.use.find(it => !!it.loader && regex.test(it.loader)));
};

module.exports = (webpackConfig, cliConfig) => {

  if (cliConfig.buildOptimizer) {
    const loader = findLoader(webpackConfig, /@angular-devkit\/build-optimizer.*\/webpack-loader/);

    const originalTest = loader.test;
    loader.test = (file) => {
      const isMonaco = !!file.match('node_modules/monaco-editor');
      return !isMonaco && !!file.match(originalTest);
    };
  }

  webpackConfig.plugins.push(
    new MonacoWebpackPlugin()
  );

  return webpackConfig;
};

[arturovt]

I debugged a little bit this issue out of interest and noticed that the problem lies here:

https://github.com/angular/angular-cli/commit/6076e16ebcba1947cda308b9f3a6e611768ee82e#diff-98ef76947c50df9f53c7f56d716cb64c

As you can see that all __param calls are removed. The monaco-editor relies on the internal DI framework, there are a lot of decorated parameters, e.g. for the model service:

ModelServiceImpl = __decorate(
  [__param(0, IConfigurationService), __param(1, ITextResourcePropertiesService)],
  ModelServiceImpl
);

Basically monaco-editor's DI framework is not able to work correctly, that's why you see those issues.

@filipesilva could you help to resolve this issue?

[filipesilva]

Our optimization strategy currently depends heavily on Build Optimizer, and one of the things it does is remove that metadata. We're looking at wholly removing build optimizer from app builds but that won't happen in the version 9 timeframe... Until then I think the best workaround really is https://github.com/angular/angular-cli/issues/14033#issuecomment-507516164.

[benelliott]

I had to tweak @maxtacco's tweak to get it working on Windows, due to the backslash path separators:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

const findLoader = (webpackConfig, regex) => {
    return webpackConfig.module.rules
        .filter(rule => !!rule.use)
        .find(rule => rule.use.find(it => !!it.loader && regex.test(it.loader)));
};

module.exports = (webpackConfig, cliConfig) => {
    if (cliConfig.buildOptimizer) {
        const loader = findLoader(
            webpackConfig,
            /@angular-devkit[\/\\]build-optimizer.*[\/\\]webpack-loader/
        );

        const originalTest = loader.test;
        loader.test = file => {
            const isMonaco = !!file.match(/node_modules[\/\\]monaco-editor/);
            return !isMonaco && !!file.match(originalTest);
        };
    }

    webpackConfig.plugins.push(new MonacoWebpackPlugin());

    return webpackConfig;
};

[Betalos]

I can confirm that the issue is still appearing in latest cli 9.1.7

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}