5

I'm developing an Angular project base on Fomantic-UI framework (that is a fork of Semantic-UI).

I have installed it:

npm install --save fomantic-ui

and then I have added the following lines in angular.json file:

"styles": [
    "node_modules/fomantic-ui/dist/semantic.min.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/fomantic-ui/dist/semantic.min.js"
]

I have also installed types for it with npm install --save @types/semantic-ui and, according to this, they should work fine with Fomantic-UI.

Anyway this seems not to be enough to use functions such as modal(), dropdown(), calendar(), in fact I get error both within my IDE (Webstorm) and during compile:

TS2339: Property 'modal' does not exist on type 'JQuery<HTMLElement>'.

TS2339: Property 'calendar' does not exist on type 'JQuery<any>'.

TS2339: Property 'dropdown' does not exist on type 'JQuery<HTMLElement>'.

and so on...

Do you know what is the right way to import Fomantic-UI in my project?

smartmouse
  • 13,912
  • 34
  • 100
  • 166

2 Answers2

0

For Typescript types you need to add some lines into your tsconfig.json file to declare those types to your Angular Application. 

{
  "compilerOptions": {
    ...
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "hammerjs",
      "jasmine",
      "semantic-ui"
    ],
    ...
}

And also in the tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "semantic-ui"
    ]
  },
  ...
}

Same in the test file tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node",
      "semantic-ui"
    ]
  },
  ...
}
Ling Vu
  • 4,740
  • 5
  • 24
  • 45
  • This doesn't work. I get the same errors. What about the import of jQuery that is a dependency of Semantic/Fomantic? Maybe could it be related to the right way to import Semantic/Fomantic? – smartmouse Dec 10 '19 at 08:37
  • This would be stange since when it really needs jquery then it should already downloaded it. You might have to check some dependency versions. Maybe there was something that was changed of the dependencies recently, but not covered. – Ling Vu Dec 10 '19 at 08:45
  • But it would be worth a try to download jquery and try to make it running. – Ling Vu Dec 10 '19 at 08:45
  • Yes, I have already installed jQuery and its types then added `import * as $ from 'jquery';` in `main.ts` to use `$` within the whole application. But using `dropdown`, `modal`, `calendar` and other Semantic modules with `$` give me those errors... – smartmouse Dec 10 '19 at 08:49
  • I'll try to reproduce it. Give me some time! – Ling Vu Dec 10 '19 at 08:56
  • I have tested it and it worked without issues. https://github.com/LingVuDev/FormaticUITest You might clone it and take a look – Ling Vu Dec 10 '19 at 09:17
  • I did clone your project... where did you use `dropdown`, `modal` and other Semantic funcions? – smartmouse Dec 10 '19 at 09:40
  • Ah okay I missed that, let me try. – Ling Vu Dec 10 '19 at 09:41
  • Yea sorry, I couldn't solve it. I hope you could find a solution! – Ling Vu Dec 10 '19 at 14:02
  • 1
    Thank you anyway ;) – smartmouse Dec 10 '19 at 14:03
0

There is several issues , first install jquery

install jquery

npm install jquery — save

error TS2339: Property 'modal' does not exist on type 'JQuery'

according to user @tucker

  1. Property modal does not exist on type JQuery install

    npm install -D @types/bootstrap

Chanaka Weerasinghe
  • 5,404
  • 2
  • 26
  • 39