如何将Fomantic-UI导入到Angular项目中

Question

我正在开发一个基于Fomantic-UI框架的Angular项目(这是语义-UI的一个分支)。

我已经安装好了：

npm install --save fomantic-ui

然后我在angular.json文件中添加了以下几行：

"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"
]

我还为它安装了npm install --save @types/semantic-ui的类型，根据this的说法，它们应该可以很好地与Fomantic-UI一起工作。

无论如何，这似乎不足以使用像modal()，dropdown()，calendar()这样的函数，事实上我在我的集成开发环境(Webstorm)和编译过程中都得到了错误：

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>'.

以此类推。

你知道在我的项目中导入Fomantic-UI的正确方法是什么吗？

Answer 1

对于Typescript类型，您需要在tsconfig.json文件中添加一些行，以便将这些类型声明给Angular应用程序。

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

在tsconfig.app.json中也是如此

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

与测试文件tsconfig.spec.json中的相同

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

Answer 2

有几个问题，首先安装jquery

install jquery

npm install jquery — save

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

根据用户@tucker

类型JQuery install上不存在

1. 属性modal

npm install -D @types/bootstrap