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.
Related
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.
I am trying to call the javascript function into the angular here is the plugin I am using "npm I global payments-3ds" of which I copied javascript files from node_modules and tried to call in my component
Below is the example :
import {
Component,
OnInit
} from '#angular/core';
import {
handleInitiateAuthentication
} from './globalpayments-3ds/types/index';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
name = 'Angular';
ngOnInit(): void {
const status: any = "CHALLENGE_REQUIRED"
const resp = {
challenge: {
encodedChallengeRequest: "abcd",
requestUrl: "url,
},
challengeMandated: "MANDATED",
dsTransactionId: "44444",
id: "444444",
status: status,
};
const windowSize: any = "WINDOWED_600X400";
const displayMode: any = "lightbox";
const challengeWindow = {
windowSize: windowSize,
displayMode: displayMode,
};
handleInitiateAuthentication(resp, challengeWindow)
}
}
I am trying to call the handleInitiateAuthentication() which is giving me the below error
Here is the file structure
from index.d.ts i am calling the handleInitiateAuthentication() function
Here is Stackblitz code for the same
https://stackblitz.com/edit/angular-vodezz?file=src%2Fapp%2Fapp.component.ts
Please help I never used the js function in angular I tried to add in assets not worked
I have tried to create an angular library and add the js files in it and update the package, by converting the file to .tgz but nothing working it showing always the same error,
Why am I doing is I have to update one of the files from node_modules, basically I wanna change files from node modules which is why i copied those files locally
this is also giving error
You have to import directly js file.
// #ts-ignore
import { handleInitiateAuthentication } from './globalpayments-3ds/globalpayments-3ds.esm.js';
For error about module, it's because you have to define type of your module in TypeScript. You can directly use // #ts-ignore.
See this stackblitz : https://stackblitz.com/edit/angular-xz4kmp?file=src%2Fapp%2Fapp.component.ts
You don't need to import a library like that. First of all install the library to your project:
npm i globalpayments-3ds --save
then in your ts file:
import { handleInitiateAuthentication } from 'globalpayments-3ds';
see this stackblitz
The recommended way to make your own modified versions from open source libraries is to fork them and build your own versions.
Also note that you must take into account the license of that NPM package which in the case of https://github.com/globalpayments/globalpayments-js is GPL-v2, so if you will use it for commercial purposes you must follow the agreement. Check this branch: GNU General Public License (v2): can a company use the licensed software for free?.
Taking a look to your Stackblitz code, you may notice that there are several JS versions of the same module in src/app/global-payments-3ds/ folder:
globalpayments-3ds.js (CommonJS, used in Node environments).
globalpayments-3ds.min.js (CommonJS minified).
globalpayments-3ds.js.map (CommonJS minified map file to reference during debugging).
globalpayments-3ds.esm.js (ESM, ECMA Standard Module).
...
To use an external JS Module in an Angular App, as it is JavaScript and not TypeScript, you must tell TypeScript Compiler that you want to allow JS modules by enabling allowJS: true in tsconfig.ts file at the root of the project.
After that you should be be able to import the ESM version (globalpayments-3ds.esm.js) in your Angular App, or if you want to use the CommonJS version, you can also enable esModuleInterop: true in tsconfig.ts to allow importing CommonJS/AMD/UMD JS modules in your project, like globalpayments-3ds.js.
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
I'm aware there are similar questions but I still can not get it to work..
So I want to use slick.js so I downloaded the files and put it in my assets folder in my angular application
Ive imported the libraries in my
angular.cli.json
"styles": [
"./assets/scripts/slick-1.8.0/slick.css",
"./assets/scripts/slick-1.8.0/slick-theme.css"
],
"scripts": [
//jQuery imports above
"./assets/scripts/slick-1.8.0/slick.min.js"
]
then In my component...
import { Component, OnInit, Injector } from '#angular/core';
import { AppComponentBase } from '#shared/common/app-component-base';
import * as Slick from '../../../../assets/scripts/slick-1.8.0/slick/slick.min.js';
#Component({
selector: 'app-di-type2',
templateUrl: './di-type2.component.html',
styleUrls: ['./di-type2.component.scss']
})
export class DiType2Component extends AppComponentBase implements OnInit {
public constructor(
injector: Injector
) {
super(injector);
}
ngOnInit() {
const slideContainer = document.querySelector('.slider');
slideContainer.slick({
autoplay: true,
autoplaySpeed: 3500,
});
}
}
from what Ive read about importing external javascript libraries into angular application this should work.. Im getting an error in vscode that says [ts] Property 'slick' does not exist on type 'Element'.any
and then in my console im getting
any help would be appreciated!
Thanks!
Install Slick.js using Node and NPM
https://nodejs.org/
npm install slick-carousel --save
https://www.npmjs.com/package/slick-carousel
Once you install this npm, it'll be saved as a dependency in your package.json file.
Then import Slick:
import 'slick-carousel';
someElement.slick();
You can declare the library as a var of type "any" (assuming it has no typing definitions *.d.ts) after your imports in your component if you import the script in your index.html:
declare let <yourlib>: any;
I am currently trying to use strophe with ionic 2, I have npm both strophe and jquery and also #types/strophe and typings.
this is my code
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {Strophe} from 'strophe';
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
public connection: any ;
public BOSH_SERVICE: any="http://52.32.***.5:5280/http-bind/" ;
constructor(public navCtrl: NavController) {
}
login() {
this.connection = new Strophe.Connection(this.BOSH_SERVICE);
this.connection.connect('ama****'+'#'+'localhost', 'o***oop', this.onConnect);
console.log("Hello World !");
}
onConnect(status) {
console.log('onConnect: '+status);
}
when I try ionic serve I get this error
TypeError: __WEBPACK_IMPORTED_MODULE_2_strophe__.Strophe is undefined
Stack trace:
HomePage.prototype.login#http://localhost:8100/build/main.js:55747:9
View_HomePage_0/<#ng:///AppModule/HomePage.ngfactory.js:135:21
viewDef/handleEvent#http://localhost:8100/build/main.js:12170:98
callWithDebugContext#http://localhost:8100/build/main.js:13462:39
debugHandleEvent#http://localhost:8100/build/main.js:13050:12
dispatchEvent#http://localhost:8100/build/main.js:9070:12
renderEventHandlerClosure/<#http://localhost:8100/build/main.js:9662:20
decoratePreventDefault/<#http://localhost:8100/build/main.js:33505:53
f</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:9644
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask#htt p://localhost:8100/build/main.js:4397:28
f</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:9557
c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:4812
t/this.invoke#http://localhost:8100/build/polyfills.js:3:10626
1) download Strophe library from Strophe Site
Then, You should put the framework inside /src/assets/
Then, You should add the script tag to the index.html before polyfills.js and main.js
Thus
<script src="assets/strophejs-1.2.14/strophe.js"></script>
Last,
you should put this declare statement before to use the strophe.
declare var Strophe: any;
It works for me!
2) another way is you can install using
npm install strophe.js
and copy strophe.js file from node_modules/strophe.js folder to your src/assets folder as above and then give path in your index file