Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Modeling » TMF (Xtext) » XText Integration with Angular application(Unable to integrate XText sources into the Angular application)
XText Integration with Angular application [message #1826277] Wed, 22 April 2020 15:56 Go to next message
Maksym Sorokatov is currently offline Maksym SorokatovFriend
Messages: 1
Registered: April 2020
Junior Member
Hi there!

I can't figure out - how it's possible to integrate XText into Angular 9 application for Ace Editor?

We have Java-server instance which runs XText on itself, and as I see in example - in simple web integration on client side we should use requireJS modules to connect it to server.

We have jQuery and Ace modules at NPM repository, but I can't find alternative for "xtext/xtext-ace" plugin which is a part of org.eclipse.xtext.web:2.21.0 Maven plugin.

So, could you please advice, maybe I should try another approach or concept to use it at Angular, or maybe it's not compatible to angular application structure.

Would be waiting for any advice

Best Regards

Re: XText Integration with Angular application [message #1826286 is a reply to message #1826277] Wed, 22 April 2020 19:03 Go to previous messageGo to next message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 13641
Registered: July 2009
Senior Member
Hi, i have zero knowledge about angular,
but you dont have to load
xtext-ace (xtext2ace translation layer)
nor ace (the actual editor)
from webjar
(if that is what you mean by "structure")

you can also put the js files locally. (e.g. unpack the jar)


Need professional support for Xtext, Xpand, EMF?
Go to: https://www.itemis.com/en/it-services/methods-and-tools/xtext
Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
Re: XText Integration with Angular application [message #1831326 is a reply to message #1826286] Mon, 17 August 2020 13:13 Go to previous message
Johannes Schaefer is currently offline Johannes SchaeferFriend
Messages: 7
Registered: October 2014
Junior Member
Hi,

I have the same issue. I like to integrate the generated xtext ACE editor into an Angular Component.
I already the the generated JavaScript files packaged as npm module. But when I try to instantiate the editor I get a lot of errors from require.js (already at compile time of the typescript code.).

mport { Component, OnInit, Input } from '@angular/core';

import 'ace-builds/src/ace';
import 'ace-builds/src/ext-language_tools';
import xtext from 'xtext/xtext-ace';

@Component({
  selector: 'app-qml-editor',
  templateUrl: './qml-editor.component.html',
  styleUrls: ['./qml-editor.component.css']
})
export class MyDslEditorComponent implements OnInit {

  @Input() componentId: string;

  constructor() { }

  ngOnInit() {
    console.log('xtext', xtext);
    xtext.createEditor();
  }
}


When I compile my code I get something like...
ERROR in ./node_modules/ace-builds/src/ace.js
Module not found: Error: Can't resolve '../../lib/lang' in '..my-dir..\node_modules\ace-builds\src'
ERROR in ./node_modules/ace-builds/src/ace.js
Module not found: Error: Can't resolve '../../lib/oop' in '..my-dir..\node_modules\ace-builds\src'


It seems that require.js don't work correctly in the ace.js file. All local references are not correctly resolved.

https://i.stack.imgur.com/SDUgJ.png

Also after hours of googling I can't find an solution. But many it is mainly an missing of my understanding how it should work.

Any help on this would be really appreciated.
Previous Topic:How to programmtically add EObject into Resource
Next Topic:Terminal Rule vs. Keyword Prioritization
Goto Forum:
  


Current Time: Tue Oct 27 16:42:11 GMT 2020

Powered by FUDForum. Page generated in 0.02102 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top