Incorporate an external library

Question

Incorporate an external library

I am currently facing a challenge in my angular2 project where I need to import a 3rd party library.

Here are the steps I have taken so far:

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

However, I am stuck at this point. How do I go about importing and utilizing this library? Some of the objects in the library include Shape and Stage.

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

Unfortunately, this method does not seem to work.

This is how my folder structure looks like:

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

javascript angular typescript angular-cli

Answer 1

Answer №1

To successfully integrate the easeljs library into your project, you need to make some modifications in your tsconfig.json:

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

The path specified for easeljs should be relative to the location of your tsconfig.json.

Once you have added the path, you can import the library using:

import * as createjs from 'easeljs';

You can then utilize the library within your project like so:

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

Sometimes, the definition files in the @types folder may not align perfectly with how modules are imported. It is recommended to create a local typings folder and include an easeljs.d.ts file with proper references.

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

declare module "createjs" {
    export = createjs;
}

Ensure the reference path is accurately pointing to the correct directory based on your project structure.

In addition, add the local typings folder to the typeRoots property in your tsconfig.json:

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

UPDATE

If the above method does not work for the easeljs library, consider using Angular CLI's script preload option:

Edit your angular-cli.json file to incorporate the library:

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

Remove the

import * as createjs from 'easeljs'

, avoid using paths in tsconfig.json, and exclude the local typings folder to ensure smooth integration.

Answer 2

To successfully integrate the easeljs library into your project, you need to make some modifications in your tsconfig.json:

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

The path specified for easeljs should be relative to the location of your tsconfig.json.

Once you have added the path, you can import the library using:

import * as createjs from 'easeljs';

You can then utilize the library within your project like so:

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

Sometimes, the definition files in the @types folder may not align perfectly with how modules are imported. It is recommended to create a local typings folder and include an easeljs.d.ts file with proper references.

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

declare module "createjs" {
    export = createjs;
}

Ensure the reference path is accurately pointing to the correct directory based on your project structure.

In addition, add the local typings folder to the typeRoots property in your tsconfig.json:

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

UPDATE

If the above method does not work for the easeljs library, consider using Angular CLI's script preload option:

Edit your angular-cli.json file to incorporate the library:

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

Remove the

import * as createjs from 'easeljs'

, avoid using paths in tsconfig.json, and exclude the local typings folder to ensure smooth integration.

Incorporate an external library

Answer №1

Similar questions

How can I make my webpage fill the entire width of an iPhone screen when in landscape mode using Angular or React?

MongoDB was successfully updated, however the changes are not being displayed on the redirected

Transform a literal string type definition into a string value (similar to the typeof operator), or is it the other way around in TypeScript?

Avoid using `@typescript-eslint/no-floating-promises` when using a `const` function

The majority of the sliding banner is crafted using 90% HTML and CSS3, with just a touch

Does D3 iterate through the entire array every time we define a new callback?

Issue with login form in IONIC: Form only functions after page is refreshed

Facing challenges in both client-side and server-side components

Cricket score update features on the client side

Pressing the button in JqGrid will assign an identification number

Entering _this

Exploring the retrieval of stored information from $localStorage within an AngularJS framework

Unable to reach the sub-component of the JSON object that was returned

Executing unique calculations on Kendo UI Grid Columns

Using yargs to pass parameters/arguments to a Node script through an npm script

What is the best way to trigger a function in the parent component when a child component is clicked

Initial binding of Angular2 ControlGroup valueChanges event

When utilizing mat-select within a Custom Element (web component), the options are displayed outside of the shadow DOM

How to Use Framer Motion in Next.js for window.innerWidth Less Than 768

Executing JavaScript's addEventListener() function without specifying the event that triggers it