ngx-monaco-editor: NgxMonacoEditorConfig Not working in angular production build

I have the MonacoConfig in an extra file:

import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';

const monacoConfig: NgxMonacoEditorConfig = {
  defaultOptions: {scrollBeyondLastLine: false},
  onMonacoLoad: () => {
    // Register a new language
    let monaco = (<any>window).monaco
    [...]

}
};
export default monacoConfig;

And I import it into app.module:

import monacoConfig from './editor/monaco-lang'
import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';
...
imports: [
 MonacoEditorModule.forRoot(monacoConfig),
]

While serving and building everything acts normal, but when I build it as production the editor does not load and I am getting this error:

ERROR TypeError: Cannot read property 'defaultOptions' of null
    at e.set [as options] (main.d3395c8….bundle.js:1)
    at $r (main.d3395c8….bundle.js:1)
    at main.d3395c8….bundle.js:1
    at main.d3395c8….bundle.js:1
    at bi (main.d3395c8….bundle.js:1)
    at ro (main.d3395c8….bundle.js:1)
    at main.d3395c8….bundle.js:1
    at Object.updateDirectives (main.d3395c8….bundle.js:1)
    at Object.eo [as updateDirectives] (main.d3395c8….bundle.js:1)
    at _i (main.d3395c8….bundle.js:1)

Is my config wrong or is this a common issue?

If I build it without --prod it works in the browser, but not in my electron app. I get this error:

ERROR Error: Uncaught (in promise): TypeError: window.require.config is not a function
TypeError: window.require.config is not a function
    at onGotAmdLoader (base-editor.js:50)
    at base-editor.js:68
    at new ZoneAwarePromise (zone-mix.js:891)
    at EditorComponent.webpackJsonp../node_modules/ngx-monaco-editor/base-editor.js.BaseEditor.ngAfterViewInit (base-editor.js:42)
    at callProviderLifecycles (core.js:12706)

Is something wrong with the way I import my config?

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 10
Comments: 23

Most upvoted comments

As mentioned above, I do think this looks as if the config becomes nulled once it’s loaded into the editor. I chased it down in the source and I wonder if it’s got to do with the provider scopes. Could it be that somehow when the module tries to add the new config it fails to provide it outside of the module, ending up making the default value null?

See affected code: https://github.com/atularen/ngx-monaco-editor/blob/master/src/platform/editor/editor.module.ts#L26

I tried setting the injector token directly in my main app.module.ts using the following and that worked perfectly:

import MonacoConfig from './monaco-config';
import { AppComponent } from './app.component';
import { EditorComponent } from './editor/editor.component';

@NgModule({
  declarations: [
    AppComponent,
    EditorComponent
  ],
  imports: [
    FormsModule,
    MonacoEditorModule.forRoot()
  ],
  providers: [
    { provide: NGX_MONACO_EDITOR_CONFIG, useValue: MonacoConfig }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ddikman on Feb 10, 2019

Looks like there is a race condition while loading the loader.js in the ngAfterViewInit function and the browser sending the load event when the loader.js has been added to the dom, this should be addressed with simplifying and updating ngAfterViewInit. A workaround is adding the following to the angular.json file, the downside is the loader is always included and not lazy loaded.

        "scripts": [
            "./node_modules/ngx-monaco-editor/assets/monaco/vs/loader.js"
        ]

markoj21 on Sep 23, 2020

Hi for all,

I tried @piotrjurczuk solution but I got same problem like above. Has anyone found a solution?

Thanks

ghost on Nov 9, 2018

Tried it already. Same problem. It also says property of null, so the whole object must be null. The same problems occures if I fix the baseUrl in the source code with the defaultOptions

Stevertus on May 16, 2018