Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor not works with standAlone components #1372

Closed
AdamsContreras999 opened this issue Jul 8, 2024 · 6 comments
Closed

Editor not works with standAlone components #1372

AdamsContreras999 opened this issue Jul 8, 2024 · 6 comments

Comments

@AdamsContreras999
Copy link

AdamsContreras999 commented Jul 8, 2024

import assets of monaco error with component standAlone
image

and also return error when call ngs
image

please can you update documentation or write in this ticket how implement the editor with standAlone Components?

this problem evit works good this editor

I have
-angular 18.0.1

  • "@ngstack/code-editor": "^7.2.0",
  • "monaco-editor": "^0.47.0",

@DenysVuika i hope can you help me

@DenysVuika
Copy link
Contributor

You are importing CommonModule, as well as a bunch of Material Modules, what's the concern about Code Editor? can you import it the same way?

@AdamsContreras999
Copy link
Author

AdamsContreras999 commented Jul 22, 2024

You are importing CommonModule, as well as a bunch of Material Modules, what's the concern about Code Editor? can you import it the same way?

That's right, I import those necessary modules into the component because it is a standAlone component, and because I need those modules for that component to work, but when I import, but code editor cannot be imported there, I attached the error that returns in the image, if I import CodeEditorModule does work but when I want it to work offline like it is in the img it doesn't work

@DenysVuika

@craigiswayne
Copy link

I have the same issue, i.e. importing into a standalone component

So what I did was create a separate module, and imported that module into my standalone component

So it now at least compiles

image image

However at runtime, i now get the following error:

image
TypeError: Cannot read properties of undefined (reading 'editor')
    at _CodeEditorService.createModel (ngstack-code-editor.mjs:107:24)
    at _CodeEditorComponent.setupEditor (ngstack-code-editor.mjs:533:38)
    at _CodeEditorComponent.<anonymous> (ngstack-code-editor.mjs:522:10)
    at Generator.next (<anonymous>)
    at chunk-R7GQRDZ6.js?v=5ae53e92:49:61
    at new ZoneAwarePromise (zone.js:2702:25)
    at __async (chunk-R7GQRDZ6.js?v=5ae53e92:33:10)
    at _CodeEditorComponent.ngAfterViewInit (ngstack-code-editor.mjs:521:27)
    at callHookInternal (core.mjs:5136:14)
    at callHook (core.mjs:5163:13)

and this is the line causing the problem:

image
createModel(value, language, uri) {
    return this.monaco.editor.createModel(value, language, this.monaco.Uri.file(uri));
  }

I'm gonna keep fiddling to see if i can figure this out

@craigiswayne
Copy link

after some digging i've found that the event triggered after the code box is loaded, does not return monaco

codeEditorService.loaded.subscribe(event => {
      this.setup(event.monaco);
    });

So when it tries to setup, it passes through a null value, and that causes the other errors

image

@AdamsContreras999
Copy link
Author

after some digging i've found that the event triggered after the code box is loaded, does not return monaco

codeEditorService.loaded.subscribe(event => {
      this.setup(event.monaco);
    });

So when it tries to setup, it passes through a null value, and that causes the other errors

image

please @DenysVuika can you help us?

@ngstack ngstack deleted a comment from craigiswayne Nov 6, 2024
@DenysVuika
Copy link
Contributor

The component is fully standalone with the 9.0.0 release: https://github.com/ngstack/code-editor/releases/tag/v.9.0.0

Please check the updated readme or the standalone apps (single/multiple editors)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants