问题
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
Property
modal
does not exist on typeJQuery
installnpm 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