Coral and Granite in Typescript / Archetype 20









Disclaimer: New to ts/npm, but want to take advantage of the ui.frontend in archetype 20. I'm migrating a clientlib from ui.apps to ui.frontend in Archetype 20. I converted the js files to ts files. I resolved most warnings and errors after changing the extension from .js to .ts. However, I can not seem to fix errors where I had made a call to Coral and Granite.  In JS, this was allowed. In TS, it causes a compilation error. I understand that I cannot implicitly use an object as I did in my js file, but I can't find a fix.

A line like this:

new Coral.SelectList();

generates this:

TS2304: Cannot find name 'Coral'.


My closing line:

})(document, Granite.$);

generate the same kind of error...

TS2304: Cannot find name 'Granite'.

I tried to resolve the Coral issue first. I tried installing coral-ui to my node_modules folder:

npm i coral-ui

...and adding to my package.json

"coral-ui": "^1.0.3",

"core-js": "^2.5.4",

...and adding to my .ts file

import {Coral} from 'coral-ui';

That changed the error to:

TS2305: Module '"../../[longpathhere]/ui.frontend/node_modules/coral-ui/lib/index"' has no exported member 'Coral'.

When a coworker tried this in a test angular project, that had worked. Any ideas on how to do this the AEM way in ui.frontend?

Thanks in advance.