angular集成jquery

1. 安装jquery 

   
   npm install jquery --save
   npm install @types/jquery --save-dev

2. package.json文件中自动添加了如下代码

   "dependencies": {
       ......
       "jquery": "^3.3.1",
       ......
     },
     "devDependencies": {
       ......
       "@types/jquery": "^3.3.0",
       ......
     }

3. 在xxxx.component.ts中可以用了

    $('#sideBookmark').html('有提示');

    

4. 直接在visual studio code中，也可以运行，但是编译的时候出错了 error TS2304: Cannot find name '$'

   C:\Users\Administrator\auction>ng build
   Date: 2018-02-12T12:00:17.489Z
   Hash: eb41ff3f89e83540c1d1
   Time: 4112ms
   chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
   chunk {main} main.bundle.js, main.bundle.js.map (main) 303 bytes [initial] [rendered]
   chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes [initial] [rendered]
   chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 338 kB [initial] [rendered]
   chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 163 kB [initial] [rendered]
   
   ERROR in src/app/app.component.ts(11,17): error TS2304: Cannot find name '$'.

5. 加个三斜线指令编译就通过了

   /// <reference types="jquery" />
   /// <reference types="jquery.cookie" />
   /// <reference types="jquery.slimscroll" />
   
   import { Component, OnInit } from '@angular/core';
   import { Http, Headers, URLSearchParams  } from '@angular/http';
   import { Observable } from 'rxjs/Observable';

6. 结果碰到了，没有的DTS的slimScrollHorizontal.min.js文件， 只能用dtsmake和tern自己来把js装换成dts文件。

   npm i dtsmake -g
   npm install tern -g

7. 生成dts文件

   dtsmake -s .\node_modules\jQuery-slimScroll-1.3.0\slimScrollHorizontal.min.js
   
   
   dtsmake started.
   [CMD]node "d:\用户目录\我的文档\Tencent Files\124580868\FileRecv\school\school\Artraning\node_modules/tern/bin/condense" .\node_modules\jQuery-slimScroll-1.3.0\slimScrollHorizontal.min.js --no-spans
   [SRC].\node_modules\jQuery-slimScroll-1.3.0\slimScrollHorizontal.min.js
   File saved. (.\node_modules\jQuery-slimScroll-1.3.0\slimScrollHorizontal.min.d.ts)

    

8.  
9.  

 

 

 

 

 

 

 

1.  

 

 

 

 

1.  

 

npm install tern -g

 

转载于:https://my.oschina.net/u/3781472/blog/1621696