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.

Embeding js library in angular project raise: Module not found: Error: Can't resolve

I have following problem: im working on Angular project where i need to implement a flowchart editor for witch im using this library:
https://github.com/jerosoler/Drawflow
together with types definition:
https://www.npmjs.com/package/#types/drawflow
All works fine as long as both are imported from npm. But i actually need to change a couple things in the drawflow library and i was trying to add the scripts directly into my project. But as soon as i remove npm package for drawflow im getting following exception:
./src/app/pages/tree-editor-page/components/editor-presentation/editor-presentation.component.ts:1:0-56 - Error: Module not found: Error: Can't resolve 'src/app/drawflow/#types/drawflow' in 'C:\DEV\repos\Digilize\DMS\DMS-Frontend\src\app\pages\tree-editor-page\components\editor-presentation'
Files included in project:
scripts defined in angular.json:
"styles": [
"src/app/styles/styles.scss",
"src/app/drawflow/js/dist/drawflow.min.css"
],
"scripts": ["src/app/drawflow/js/dist/drawflow.min.js"]
Component with types import:
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '#angular/core';
import Drawflow from 'src/app/drawflow/#types/drawflow';
import { combineLatest, first, last } from 'rxjs';
import { DTNode, DTRelation } from 'src/app/interfaces/api/decision-tree-definition.interface';
import { DTStoreService } from 'src/app/services/store/dt-state.store';
#Component({
selector: 'app-editor-presentation',
templateUrl: './editor-presentation.component.html',
styleUrls: ['./editor-presentation.component.scss']
})
export class EditorPresentationComponent implements OnInit, AfterViewInit {
private editor: Drawflow;
...
Im quite new to Angular and i dont know what im doing wrong here. Any ideas?

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

Using JQuery Plugins in Angular 4 Applications

So I am currently trying to use some jquery plugins like Magnific-Popup etc in my Angular 4 application but I'm having some trouble. I installed jquery by doing npm install --save-dev #types/jquery in my terminal and that worked fine, but I'm having trouble getting the actual plugins to work. This is what I tried initially,
#Component({
selector: 'app-showcase',
templateUrl: './showcase.component.html',
styleUrls: ['./showcase.component.css']
})
export class ShowcaseComponent implements OnInit {
#ViewChild("elementRef") elref2: ElementRef;
constructor(private elRef: ElementRef) { }
ngOnInit() {
jQuery(this.elref2.nativeElement).magnificPopup();
}
ngAfterViewInit() {
}
In order to get typescript to recognize the magnificPopup() function, I tried importing the scripts from the magnificPopup documentation into my index.html (at the bottom of the body tag), but as far as I can tell that is not working. Webstorm says "can not resolve file jquery.magnific-popup.js". I'm also loading the jquery.min script as well, and that seems to work fine.
I also tried running npm-install magnific-popup, but that also failed. Additionally, I tried adding the script into the angular.JSON file but to no avail.
I guess what I'm asking is, what is and how can I go about installing and using a third-party jquery plugin like magnific-pop up into my angular 4 application?
Thanks, any help is appreciated.

I have an Angular project where I need to use (for now) a jquery dependent plugin (nanoscroller). I use angular-cli to do all my build processes and my angular-cli.json file has the following under the "scripts" property:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js"
]
Then I use the plugin as follows:
import { AfterViewInit, Component, ElementRef, OnDestroy, Renderer, ViewChild } from "#angular/core";
declare var jQuery: any;
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent implements AfterViewInit {
layoutMenuScroller: HTMLDivElement;
#ViewChild("layoutMenuScroller") layoutMenuScrollerViewChild: ElementRef;
constructor() {
}
ngAfterViewInit() {
this.layoutMenuScroller = <HTMLDivElement>this.layoutMenuScrollerViewChild.nativeElement;
jQuery(this.layoutMenuScroller).nanoScroller({ flash: true });
}
// etc..
}
Perhaps you can adopt this to your use-case.

Angular 2.0 - How to import a child module?

I've been following the AngularJs 2.0 tutorials, and I'm stuck trying to import a child component. I'm new to angular in general so this may be a very amateur mistake.
I have this module which was working till I added the NavigationComponent directive and reference:
/// <reference path="Navigation.ts" />
/// <reference path="../angular2/angular2.d.ts" />
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import { NavigationComponent } from './Navigation'
// Annotation section
#Component({
selector: 'roadmap'
})
#View({
templateUrl : 'roadmap.html',
directives: [NavigationComponent, NgFor]
})
// Component controller
export class Roadmap {
herName: string;
content: string
names: Array<string>;
constructor() {
this.herName = 'Jessica';
this.content = "test content";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
addName(name: string){
this.names.push(name);
}
doneTyping($event) {
if($event.which === 13) {
this.addName($event.target.value);
$event.target.value = null;
}
}
}
bootstrap(Roadmap)
And I have the NavigationComponent defined as such :
/// <reference path="../angular2/angular2.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';
#Component({
selector: 'navigation'
})
#View({
template: `<h1> tester </h1>`
})
export class NavigationComponent {
message: string;
constructor() {
this.message = "I'm the navigation";
}
}
I can't get the import statement correct. I have both the Roadmap.ts and the NavigationComponent.ts in the same folder.
There errors I'm seeing aren't communicating anything useful :
Uncaught ReferenceError: System is not defined
Any advice ?

I suppose you are using scripts from internet in your index.html and have problem to access them, becouse I have same problem now. I suggest replace it with local files.
In this solution I'm using jspm package manager (you can install it via npm install -g jspm).
In your project root folder run command:
jspm init
You can leave default configuration of jspm - just press Enter for every line. Now run:
jspm install traceur-runtime
You should have all required files in jspm_packages folder. Now replace this (or similar) lines from your index.html
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime#0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system#0.16.js"></script>
with this:
<script src="jspm_packages/github/jmcriffey/bower-traceur-runtime#0.0.88/traceur-runtime.js"></script>
<script src="jspm_packages/system.js"></script>
EDIT: It looks like everything is OK now - files are online again. If problem will be back in future remember to check version of files from jspm and replace outdated ones from this answer.