如何在Angular Class Starter中使用外部库

Question

在我的应用程序中，我想使用dropzone.js

因此，我通过npm install --save-dev dropzone安装了dropzone

我在我的polyfills.browser.ts文件中包含了导入这个库

/**
 * Added parts of es6 which are necessary for your project or your browser support requirements.
 */
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
/**
 * See issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
 */
/* import 'core-js/es6/promise'; */

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

import 'dropzone';

我还安装了“@types/dropzone”。

但是像这样抛出错误是不能正常工作的。

[at-loader] ./node_modules/@types/jquery/index.d.ts:4482:65 
    TS2314: Generic type 'Event<TTarget, EventTarget, TData>' requires 3 type argument(s). 

[at-loader] ./node_modules/@types/jquery/index.d.ts:4483:20 
    TS2314: Generic type 'PlainObject<T, any>' requires 2 type argument(s). 

[at-loader] ./node_modules/@types/jquery/index.d.ts:4483:49 
    TS2314: Generic type 'Event<TTarget, EventTarget, TData>' requires 3 type argument(s). 

[at-loader] ./node_modules/@types/jquery/index.d.ts:4487:46 
    TS2531: Object is possibly 'null'. 

[at-loader] ./node_modules/@types/jquery/index.d.ts:4487:52 
    TS2349: Cannot invoke an expression whose type lacks a call signature. Type '{}' has no compatible call signatures. 

[at-loader] ./node_modules/@types/jquery/index.d.ts:4488:10 
    TS2331: 'this' cannot be referenced in a module or namespace body. 

[at-loader] ./node_modules/@types/jquery/index.d.ts:4488:16 
    TS2304: Cannot find name 'TContext'. 

我不知道是怎么回事。我不知道的缺失概念是什么？

Answer 1

打开tsconfig.webpack.json并添加：

"skipLibCheck": true

 "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "strictNullChecks": false,
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "hammerjs",
      "node"
    ]
  },

与答案无关。但是对于应用程序运行所需的依赖项，您应该使用--save而不是--save-dev。另外，我推荐使用Angular CLI，这个starter不像以前那样维护得很好。