3rd-Party-Bibliothek importieren

Question

Ich muss eine 3rd-Party-Bibliothek in einem angular2-Projekt importieren.

Hier ist, was ich getan habe:

ng new myproject 
npm install --save createjs-easeljs 
npm install @types/easeljs 

Jetzt ist der Moment, ich bin stecken. Wie importiere und verwende ich diese Bibliothek? Es gibt Objekte, wie Shape oder Stage

import { Shape, Stage } from '../../../node_modules/createjs-easeljs/lib/easeljs-0.8.2.min.js'; 

Dies gilt nicht bei allen.

Meine Ordnerstruktur:

dynam194:src timo$ tree -L 2 
. 
├── app 
│   ├── app.component.css 
│   ├── app.component.html 
│   ├── app.component.spec.ts 
│   ├── app.component.ts 
│   ├── app.module.ts 
│   └── canvas 
├── assets 
├── environments 
│   ├── environment.prod.ts 
│   └── environment.ts 
├── favicon.ico 
├── index.html 
├── main.ts 
├── polyfills.ts 
├── styles.css 
├── test.ts 
├── tsconfig.json 
└── typings 
    └── easeljs.d.ts 

tsconfig.json

"paths": { 
    "easeljs": ["../node_modules/createjs-easeljs/lib/easeljs-0.8.2.min.js"] 
}, 
"sourceMap": true, 
"target": "es5", 
"typeRoots": [ 
    "../node_modules/@types", 
    "typings", 
] 

Answer 1

Sie haben einen Pfad (und baseUrl), um Ihre tsconfig.json hinzuzufügen:

{ 
    "compilerOptions": { 
    ... 
    "baseUrl: ".", 
    "paths": { 
     "easeljs": ["../node_modules/createjs-easeljs/lib/easeljs-0.8.2.min.js"] 
    }, 
    } 
} 

mit dem Pfad zu easeljs ist relativ zu Ihrem tsconfig.json.

Danach können Sie diese Bibliothek importieren:

import * as createjs from 'easeljs'; 

Und es in Ihrem Projekt verwenden wie:

let stage: createjs.Stage = new createjs.Stage('myCanvas'); 
let shape: createjs.Shape = new createjs.Shape(); 

Da die @types Definition alle ihre eigene Art und Weise Module zu definieren Dateien haben, ihre wahrscheinlich stoßen Sie auf eine, die nicht mit dieser Art des Imports kompatibel ist. Soweit ich weiß, wollen sie das zum Standard machen.

Sie sollten einen lokalen Typisierungen Ordner erstellen, und erstellen Sie eine Datei mit easeljs.d.ts:

/// <reference path="../../node_modules/@types/easeljs/index.d.ts" /> 

declare module "createjs" { 
    export = createjs; 
} 

Vergewissern Sie sich der Referenzpfad in das richtige Verzeichnis zeigt, ich weiß nicht, Ihre Struktur Projekt :)

Danach die lokale Typisierungen Ordner in den typeRoots Eigenschaft Ihrer tsconfig.json hinzufügen:

{ 
    "compilerOptions": { 
    ... 
    "typeRoots": [ 
     "../node_modules/@types", 
     "typings/local" 
    ] 
    } 
} 

UPDATE

Scheinbar funktioniert das nicht für diese Bibliothek. Unglücklicherweise. Gut, dass Winkel-cli hat eine Option, Skripte vorzuladen:

bearbeiten Ihre angular-cli.json die Bibliothek hinzuzufügen:

{ 
    "apps": [ 
    { 
     ... 
     "scripts": [ 
     "../node_modules/createjs-easeljs/lib/easeljs-0.8.2.min.js" 
     ], 
    } 
    ] 
} 

Sie kein Import auf Ihre Datei verwenden, so entfernen import * as createjs from 'easeljs'. Und keine Notwendigkeit für den lokalen Typisierungsordner. Entfernen Sie auch die paths in Ihrem tsconfig.json