Импорт сторонней библиотеки

Question

Мне нужно импортировать стороннюю библиотеку в проект angular2.

Вот что я сделал:

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

Сейчас момент я застрял. Как импортировать и использовать эту библиотеку? Есть объекты, такие как Shape или Stage

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

Это не работает.

Моя структура папок:

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

Вы должны добавить путь (и baseUrl) к вашему tsconfig.json:

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

с пути до easeljs относительно вашего tsconfig.json.

После этого вы можете импортировать эту библиотеку с помощью:

import * as createjs from 'easeljs'; 

И использовать его в вашем проекте, как:

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

Поскольку @types определение файлы все имеют свой собственный способ определения модулей, его вероятно, вы сталкиваетесь с тем, что несовместимо с этим способом импорта. Насколько я знаю, они хотят сделать это стандартом.

Вы должны создать папку местных типизации и создать easeljs.d.ts файл, содержащий:

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

declare module "createjs" { 
    export = createjs; 
} 

Убедитесь, что опорный путь указывает на правый каталог, я не знаю структуру проекта :)

После этого добавьте папку локальных типизации в typeRoots собственности вашего tsconfig.json:

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

UPDATE

По-видимому, это не работает для этой библиотеки. К сожалению. Хорошо, что угловой кли имеет возможность для предварительной загрузки скриптов:

редактировать свои angular-cli.json добавить библиотеку:

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

Не использовать импорт в верхней части файла, поэтому удалить import * as createjs from 'easeljs'. И нет необходимости в папке с локальными типизациями. Также удалите paths в tsconfig.json