Develop Reference

Import TypeScript file from node_modules package in Angular

Currently, I'm working on a simple Angular project (v14). In this project I'm using a (private) NPM package that contains only 1 TypeScript file. This TypeScript file has a exported class but I'm unable to use it when importing them in my Angular component. The class is always undefined and returns this error:
TypeError: package_test_class__WEBPACK_IMPORTED_MODULE_0__.TestClass is not a constructor
I have created a class and import that class in a component as seen below.
test-class.g.ts (in node_module package folder)
export class TestClass {
name = 'test';
}
component.ts
import { Component } from '#angular/core';
import { TestClass } from '#package/test-class';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
})
export class TestComponent {
constructor() {
console.log(new TestClass());
}
}
I have copied the test-class.g.ts file from the node_modules folder into the src folder of the project. When I import it from this location the class is initialized as expected. However, this is not how I want to use this file, since that would mean I have to copy it after every update.
What is the best way to use classes from TypeScript files in NPM packages? Looking forward to any advice.

how to import mathjax in vue as local dependency?

im using vue-mathjax in my project and in the readme it says to use cdn of mathJax
works fine with the CDN version
im need to use mathJax(v. 2.7.2) as local as dependency for my project but dont know how to import it with the correct configurations
how do yout set the configuration same as with the cdn version?
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>
Local import after installing with npm
//main.js
import '../node_modules/mathjax/MathJax?config=TeX-AMS_HTML'
error
Uncaught SyntaxError: Unexpected token '<'
repo - https://github.com/qwtfy/mathjax-test

If you're able to switch to the new version 3, here are the steps assuming you already have vue-mathjax.
Install MathJax from npm: npm install mathjax#3
Move the MathJax's es5 directory to a public directory: mv node_modules/mathjax/es5/ src/assets/mathjax/
Import the component config you want, for example:
import '../assets/mathjax/es5/tex-chtml.js';
If you must stick with version 2.7.x, you'll need to do the following. In my testing, it was less stable.
Install MathJax 2.7.9 from npm: npm install --save mathjax#2.7.9
Move MathJax.js (located at node_modules/mathjax/MathJax.js) to a public directory like assets.
Move TeX-AMS_HTML.js (located at node_modules/mathjax/config/TeX-AMS_HTML.js) to the same public diretory.
Import both files inside your component, in order:
import '../assets/MathJax.js'
import '../assets/TeX-AMS_HTML.js';
Here it is working for me:
Full single file component example using v3 and vue-mathjax.
<template lang='pug'>
div
b-container(style='width: 40%')
b-textarea(v-model='formula' cols='30' rows='10')
p output
vue-mathjax(:formula='formula')
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { VueMathjax } from 'vue-mathjax';
import '../assets/mathjax/es5/tex-chtml.js';
#Component({
components: {
'vue-mathjax': VueMathjax,
},
})
export default class HelloWorld extends Vue {
formula = '$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$';
}
</script>
Documentation of these steps can be found here and here.

'Uncaught TypeError: Class extends value undefined is not a constructor or null' when trying to load external TypeScript component

I have something in place where I can build my components using this npx command (run in PowerShell):
&npx vue-cli-service build `
--target lib `
--formats umd-min `
--no-clean `
--dest $destinationFolder `
--name $component.Name $component.FullName
and then I import those into my vue app as per this article
It works fine when the components are written using JS, but as soon as I try to make one in TS I get this error:
file:7 Uncaught TypeError: Class extends value undefined is not a constructor or null
at Module.fb15 (file:7)
at r (file:1)
at 8875 (file:1)
at file:1
at file:1
at file:1
My TypeScript vue component is really simple:
<template>
<h1>A lovely typescript component</h1>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
#Component({
name: 'TypeScriptTest'
})
export default class TypeScriptTest extends Vue { }
</script>
I did try importing vue like this instead:
import Vue from 'vue'
but it had no effect
Does anyone know how I can resolve this?

I added this line to the top of my html file:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
And the errors went way, and my TypeScript comopnents imported successfully
This does not seem like an ideal solution, but it does work

How to use Panzoom javascript in Angular 8+?

I am unable to use Panzoom Javascript library in Angular. I get
ERROR
Error: panzoom is not defined
Here is the stackblitz of what i have done till now .
Here is the working demo of how it should work
Can any one help me troubleshoot ? Thanks
I have followed all the steps mentioned in this post

It seems Panzoom does have typescript definitions Github Issue
here is a working stackblitz
import { Component, AfterViewInit, ElementRef, ViewChild } from '#angular/core';
import panzoom from "panzoom";
#Component({
selector: 'hello',
template: `<img id="scene" #scene src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">`,
styles: []
})
export class HelloComponent implements AfterViewInit {
#ViewChild('scene', { static: false }) scene: ElementRef;
ngAfterViewInit() {
// panzoom(document.querySelector('#scene'));
panzoom(this.scene.nativeElement);
}
}

There is an easy way to do this.
Open your angular project in cmd terminal (root of your project, the same foler which contains /src).
Type npm install panzoom --save (that will add panzoom npm package to your angular.json and install it).
In your component add import import * as panzoom from "panzoom" (your project should automaticaly link it with the right file from node_modules.
in ngOnInit or anywhere needed add this line panzoom.default(document.querySelector('#lipsum'));
You should generally incject this PanZoom package in your component constructor after importing it from node_modules but I'm not sure if there is an integration provided by an author.
Definitely check NPM documentation of this plugin for more info

Babel/webpack dependencies

I have a private library I've converted to using es6 and webpack. How do I include this library in a way that I can import the entire source tree?
The library looks like this:
portedlibrary
src/dir1/Class1.js
src/dir1/Class2.js
And my application looks like this:
Application
src/app.js
src/app2.js
node_modules/portedlib/src/dir1/Class1.js
node_modules/portedlib/src/dir1/Class2.js
For internal imports, I can use relative pathing: import {app2} from './app2
For library imports, I import a single file: import moment from 'moment'
How do I import individual classes from portedlibrary?
When I try to import a class via import {Class1} from 'portedlib' I get the following error:
Module not found: Error: Can't resolve 'portedlibrary' in ...

Re-export each of the default exports as a named export in another file (e.g. index.js so you can reference the lib by its name):
// node_modules/portedlib/index.js
export { default as Class1 } from './src/dir1/Class1'
export { default as Class2 } from './src/dir1/Class2'
And then import them:
import { Class1, Class2 } from 'portedlib'