サードパーティのライブラリをインポート

Question

私はangle2プロジェクトでサードパーティライブラリをインポートする必要があります。ここで

は私がやったことです：

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

のようなオブジェクトがあります。

マイフォルダ構造：あなたのtsconfig.jsonへのパス（とbaseUrl）を追加する必要が

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

：

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

パス付きはあなたのtsconfig.jsonを基準にしています。その後

あなたが使用してこのライブラリをインポートすることができます。その、@types定義ファイルがすべてのモジュールを定義する独自の方法を持っているので

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

：

import * as createjs from 'easeljs'; 

をなど、プロジェクト内で使用おそらくあなたはそのインポート方法と互換性のないものに出くわすでしょう。私が知っている限り、彼らはそれを標準にしたいと思っています。

あなたは地元のタイピングフォルダを作成して含んeaseljs.d.tsファイルを作成する必要があります

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

declare module "createjs" { 
    export = createjs; 
} 

が基準パスが正しいディレクトリを指している、私はあなたのプロジェクトの構造を知っていないことを確認してください:)

を

それはあなたのtsconfig.jsonのtypeRootsプロパティにローカルタイピングフォルダを追加した後：

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

更新

明らかに、これはこのライブラリでは機能しません。残念ながら。良いことな角度-CLIは、スクリプトをプリロードするためのオプションがあります：

編集あなたangular-cli.jsonライブラリを追加するには：

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

は、あなたのファイルの先頭にインポートを使用するので、import * as createjs from 'easeljs'を削除しないでください。ローカル入力フォルダは不要です。 tsconfig.json