NgxMonacoEditorConfig Not working in angular production build

See original GitHub issue

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?

  1. 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?

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:10
  • Comments:23

github_iconTop GitHub Comments

4reactions
ddikmancommented, Feb 10, 2019

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 { }
1reaction
markoj21commented, Sep 23, 2020

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"
        ]
Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 5 ngx-monaco-editor fails in production - Stack Overflow
const monacoConfig: NgxMonacoEditorConfig = { // configure base path for monaco editor baseUrl: environment.prod ?
Read more >
NgxMonacoEditorConfig Not working in angular production ...
Coming soon: A brand new website interface for an even better experience!
Read more >
ngx-monaco-editor - npm
Start using ngx-monaco-editor in your project by running `npm i ngx-monaco-editor`. ... Monaco Editor Component for Angular 2 and above.
Read more >
Angular workspace configuration
The projects section of the configuration file does not correspond exactly to the ... By default, the ng build command uses the production...
Read more >
ngx-monaco-editor/README.md - UNPKG
1, # Monaco Editor Component for Angular 2 and above. ... [project-name].architect.build` (to make monaco-editor lib available to the app):.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found