Using 3rd-party AMD modules into Angular 9 application

Question

I'm trying to integrate XText to Ace web editor into my Angular 9 application.

According to XText documentation - It needs few AMD modules to be used on a client side.

As I see - it can be easily loaded with requireJS:

require.config({
    paths: {
        "jquery": "webjars/jquery/<version>/jquery.min",
        "ace/ext/language_tools": "webjars/ace/<version>/src/ext-language_tools",
        "xtext/xtext-ace": "xtext/<version>/xtext-ace"
    }
});
require(["webjars/ace/<version>/src/ace"], function() {
    require(["xtext/xtext-ace"], function(xtext) {
        xtext.createEditor();
    });
});

I installed ace from NPM, and copied proper JS files from xtext soruces to my assets folder.

And at this point, I'm a bit confused, how to make things work together.

I tried to import modules as described here, but 'xtext/xtext-ace' module isn't working in this way because of missing dependencies, which are defined in ace module. When I trying to import ace js file - console is filled by errors about missing dependencies (which are actually defined in itself)

ERROR in ./src/assets/scripts/ace.js
Module not found: Error: Can't resolve '../../lib/lang' 
ERROR in ./src/assets/scripts/ace.js
Module not found: Error: Can't resolve '../../lib/oop' 
ERROR in ./src/assets/scripts/ace.js
Module not found: Error: Can't resolve '../../range'

How should I import this modules to make them work in proper way in Angular component typescript files?

UPD: Uploaded simple angular application to github for example.

I added both modules js files to './src/assets/scripts' folder and trying to access it in app.component.ts

When I tried to import it with help or requirejs in index.html it was working, but I need it to work in my component.ts files, and get confused, how to redo this imports in them.

a couple things to try. first make sure `esModuleInterop` is true in tsconfig. import like `import ace from 'ace'` or whatever the location is. if that doesn't get it, try switching `module` to `CommonJS` in tsconfig — bryan60, Apr 29 '20 at 21:50
@bryan60 unfortunately nothing has helped to resolve it. I updated my answer with adding git repository, maybe it will do things more clear. — Maksym Sorokatov, Apr 30 '20 at 10:51
if you're loading it via scripts in angular.json or index.html and making it globally available... just write a module declaration file in your app folder so you don't need to import it anywhere... https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html .. you could write all the typings or just declare it as an any — bryan60, Apr 30 '20 at 13:31

Using 3rd-party AMD modules into Angular 9 application

0 Answers0