updating to v9 replace with provideCodeEditor cause error with wrong URL

[gladkiy]

Uncaught Error: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from assets/monaco/vs/language/html/htmlWorker.js

TypeError: Failed to parse URL from assets/monaco/vs/language/html/htmlWorker.js

[gladkiy]

Fixed it with the following code:

provideCodeEditor({
            baseUrl: location.origin + '/assets/monaco',
            typingsWorkerUrl: 'assets/workers/typings-worker.js'})

[Viktor-Ivliev]

I also get an error if I want to switch from using the module to using the provider

edit.component.ts:137 ERROR TypeError: Cannot read properties of undefined (reading 'editor')

 imports: [CodeEditorComponent],
 providers: [provideCodeEditor()]

So it's working fine:
imports: [CodeEditorModule],

use

pnpm@10.12.3
"monaco-editor": "0.52.2",
"@ngstack/code-editor": "9.0.0",

[gladkiy]

For me it works when I did the following:

• into app.module.ts

providers: [
        ...,
        provideCodeEditor({
            baseUrl: location.origin + '/assets/monaco',
            typingsWorkerUrl: 'assets/workers/typings-worker.js'
        }),
]

• into any other internal module when you use this package, for example admin.module.ts

imports: [
    ...,
    CodeEditorComponent,
    ...
  ],

CodeEditorModule is deprecated, you can remove it

[Viktor-Ivliev]

@gladkiy tnx

For my ancient project. it was a bit more complicated (since I have 2 frontends), but maybe it will help someone too.

I also didn't want to add provideCodeEditor to app.module.ts well ok, I couldn't find a better solution here. Since it causes an error in components.

app.module.ts

    provideCodeEditor({
      baseUrl: location.origin + '/frontend/browser/assets/monaco',
      typingsWorkerUrl: location.origin + '/frontend/browser/assets/workers/typings-worker.js'
    }),

frontend/angular.json

              {
                "glob": "**/*",
                "input": "node_modules/monaco-editor/min/vs",
                "output": "assets/monaco/vs"
              },
              {
                "glob": "**/*",
                "input": "node_modules/@ngstack/code-editor/assets",
                "output": "assets/code-editor"
              }

Perhaps this task can be closed. It is also possible to look for another alternative, because it looks like this library is burned out. Although I hope I'm wrong.

[DenysVuika]

@Viktor-Ivliev I accept PRs

[DenysVuika]

@gladkiy the project comes with 2 projects to run/test locally... are they also giving the same issue?

[gladkiy]

@DenysVuika not sure I understand you