404 Not Found assets/monaco-editor/min/vs/loader.js

[mabachel]

Hi (@atul-wizni ),

I have trouble with ngx-monaco-editor v12.0.0, monaco-editor v0.25.1 and Angular v12.0.4

If I try to test my work with ng serve the monaco editor cannot be found.

GET http://localhost:4200/frontend/assets/monaco-editor/min/vs/loader.js [HTTP/1.1 404 Not Found 2ms]
Loading failed for the <script> with source “http://localhost:4200/frontend/assets/monaco-editor/min/vs/loader.js”.

Note that I do have

angular.json

assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/monaco-editor",
                "output": "assets/monaco-editor"
              }
            ],

and app.module.ts

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

const monacoConfig: NgxMonacoEditorConfig = {
    baseUrl: 'frontend/assets', // configure base path cotaining monaco-editor directory after build default: './assets'
    defaultOptions: { scrollBeyondLastLine: true }, // pass default options to be used
    onMonacoLoad: () => { console.log((<any>window).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.
  };

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MonacoEditorModule.forRoot(monacoConfig),
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

and if I do ng build --configuration production frontend/dist/frontend/assets/monaco-editor/min/vs/loader.js exsits.

May someone help me please?

[mabachel]

Thanks @Zeeeca but your super fast solution does not change anything for me.

[mabachel]

Looks like the README.md confused me. Instead of having baseUrl: 'app-name/assets', I just use the default baseUrl: './assets', and now it is working.

in app.module.ts

const monacoConfig: NgxMonacoEditorConfig = {
  baseUrl: './assets', // configure base path cotaining monaco-editor directory after build default: './assets'
  defaultOptions: { scrollBeyondLastLine: true }, // pass default options to be used
  onMonacoLoad: () => { console.log((<any>window).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.
};