NgxMonacoEditorConfig Not working in angular production build
See original GitHub issueI 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?
Issue Analytics
- State:
- Created 5 years ago
- Reactions:10
- Comments:23
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.tsusing the following and that worked perfectly: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.