How to import Fomantic-UI into an Angular project

纵然是瞬间 提交于 2021-01-27 05:22:41

问题


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?


回答1:


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"
    ]
  },
  ...
}



回答2:


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




回答3:


you can try this,

(<any>$("div.modal")).modal();

or

interface JQuery {
    modal():void;
}


来源:https://stackoverflow.com/questions/59200120/how-to-import-fomantic-ui-into-an-angular-project

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!