How to use external libraries in 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?

Possible duplicate of [how to include external js file in angular 4 and call function from angular to js](https://stackoverflow.com/questions/44817349/how-to-include-external-js-file-in-angular-4-and-call-function-from-angular-to-j) — Aravind, Jul 02 '17 at 08:59
I want to use `npm install` for dependency control. But in that post, they are just include external scripts. — 한건호, Jul 02 '17 at 09:04

score 0 · Accepted Answer · answered Jul 02 '17 at 09:30

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.

How to use external libraries in Angular Class Starter

1 Answers1