Use in Angular

[jrmora]

Hi, I would like use your library in Angular:

1) npm install chordsheetjs --save
2) import { ChordSheetJS } from 'chordsheetjs'; //in my component

Error: Could not find a declaration file for module 'chordsheetjs'. 'd:/xxxx/node_modules/chordsheetjs/lib/chordsheet.js' implicitly has an 'any' type. Try npm install @types/chordsheetjs if it exists or add a new declaration (.d.ts) file containing `declare module 'chordsheetjs';

Can you give me an idea?

[martijnversluis]

Hey @jrmora. Thanks for reaching out. I think you have to drop the curly brackets, so:

import ChordSheetJS from 'chordsheetjs';

Please let me know if that solves the issue.

[jrmora]

Hi again, thanks for the reply....
No difference, usually in Angular I must put the brackets ...

I have tried different ways to use the package, but sometimes it says that the package does not contain @types (because I'm using typescript) so I'm not sure if I can import a react package on my Angular app... I'd think that it's perfectly possible

check out this printscreen:

[jrmora]

@martijnversluis : It is possible for you to create a chordsheet.d.ts file in order to provide the typings "@types/chorsheetjs" of your public classes to use them with typescript (for example in Angular)? I don't know, maybe it would be a good bonus for the usability of your project. :)

[jrmora]

I just create the chordsheetjs.d.ts with the dts-gen (from Microsoft) and this is the result:

/* Declaration file generated by dts-gen /

export = chordsheetjs;

declare const chordsheetjs: { default: { ChordLyricsPair: any; ChordProFormatter: any; ChordProParser: any; ChordSheetParser: any; HtmlDivFormatter: any; HtmlTableFormatter: any; Line: any; Song: any; Tag: any; TextFormatter: any; }; };

[jrmora]

Solved!!! :)

this is the way to integrate it in Angular2+:

1) create a file typings.d.ts (if it does not exist) with :

declare module 'chordsheetjs' { var HtmlTableFormatter: any; //add others if needed export default HtmlTableFormatter; //add others if needed }

2) In the component:

import * as ChordSheetJS from 'chordsheetjs' ... var x = new ChordSheetJS.default.HtmlTableFormatter();

Anyway: it would be nice to have the right types définitions for typescript directly on your repo :)

[martijnversluis]

Nice job @jrmora! Thanks for letting know and sharing the solution! 👍

[kyoshi19]

there is a way to include it as a library to an AngularJs project? i tried to include the index.js file but it gives me the following error: Import: Error:

[martijnversluis]

Hey @kyoshi19, thanks for reaching out.

ChordSheetJS assumes using any kind of build tool. Using it without a build tool is not supported out of the box (so far). However, you can use wzrd.in for this:

<script src="https://wzrd.in/standalone/chordsheetjs@6.1.0"></script>