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

Question

In my app, I want to use dropzone.js

So, I installed dropzone by npm install --save-dev dropzone

And I include import this library in my polyfills.browser.ts file

/**
 * 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';

And I also installed '@types/dropzone'.

But this is not work properly throwing error like this.

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

I don't know what's the matter. What is the missing concepts that I don't know?

Answer 1

Open tsconfig.webpack.json and add:

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

Unrelated to the answer. But you should use --save and not --save-dev for dependencies required for the application to run. Also I recommend using the Angular CLI , this starter is not maintained as well as it used to be.