ionic 2 with strophe not working? - javascript

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

Related

How to access method of Project A into Project B in nodejs, i am using nestjs

i have MailEvent class and want to use SendEmail method in client project. i use NPM link to share code for client project. but i can't access this method. how can i access this method in client project. i am using nestJS framework. thanks
#Injectable()
export class MailEvent {
constructor(private eventEmitter: EventEmitter2) {}
// store email details to RabbitMQ
SendEmail() {
amqplib.connect(
'amqp://localhost',
(connectionError, connection) => {
if (connectionError) {
throw connectionError;
}
connection.createChannel((channelError, channel) => {
if (channelError) {
throw channelError;
}
const queue = 'Test_emails_queue';
channel.assertQueue(queue, { durable: false });
channel.sendToQueue(queue, Buffer.from(JSON.stringify(email)));
// create event for sending email
this.eventEmitter.emit('send_email', email);
});
},
);
}
In nestjs we can create a reusable module. Then, this module can be imported to another module. If the module is stored in separated repo, then we can build the module first before installing it to another repo using NPM.
Steps to do:
generate nestjs resource, e.g. MailEventModule on the terminal. It will also create the controller and service class
nest g resource mail-event
export the service via the module file mail-event.module.ts
import { Module } from '#nestjs/common';
import { MailEventService } from './mail-event.service';
#Module({
providers: [MailEventService],
exports: [MailEventService]
})
export class MailEventModule { }
Build the module. It will create a new folder named DIST containing the module ready to be installed in another repo/project
npm run build
upload the mail-event module to npm
install mail-event in the client project using npm command, e.g. npm install mail-event
Import the module to the client project in client-project.module.ts
import { Module } from '#nestjs/common';
import { MailEventModule } from 'mail-event';
#Module({
imports: [MailEventModule]
})
export class ClientProjectModule { }
Add MailEventService as dependency to the client project service in client-project.service.ts
import { Injectable } from '#nestjs/common';
import { MailEventService } from 'mail-event';
#Injectable()
export class ClientProjectService {
constructor(private mailEventService: MailEventService) { }
myFunction() {
this.mailEventService.sendEmail();
}
}
If you have tried this steps, please give us the feedback whether it works or not. Thank you

How to create multiple connections in angular 6 using ngx-mqtt library?

I need to connect to multiple brokers from the same angular 6 app.
When importing MqttModule, we pass the config to it as:
imports: [...
MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
...]
I tried creating 2 separate modules on same hierarchical level and passing different config and setting up the connections, but it is not working.
I think it creates services at the root level and we cannot create a separate connection in different modules.
Can we even create multiple connections? If so, how?
I tried so many things but the only thing work for me is below (Angular 8)
install following command in your project
npm i buffer --save
npm i -S process
npm i mqtt --save
Add following line to polyfills.js at the end
(window as any)['global'] = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
import * as process from 'process';
window['process'] = process;
add following code to your app.component.ts
import { Component } from '#angular/core';
import * as mqttt from "mqtt";
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'checkMqttFromWeb';
constructor(){
var client = mqttt.connect('mqtt://192.168.0.29:1884')
client.on('connect', function () {
client.subscribe('fooBar', function (err) {
if (!err) {
client.publish('fooBar', 'Hello mqtt')
}
})
})
client.on('message', function (topic, message) {
// message is Buffer
console.log(message.toString())
client.end()
})
}
}
Now Run your app using ng serve
hope it's works

Trying to use external Javascript library in angular 5

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;

How to import Parse JS sdk into ionic 2 beta

am trying to import JS sdk into ionic 2 app, but i keep getting parse is undefined
In ionic 1.x ,parse js sdk is loaded via
<script ..parse.js </script>
and exposed as a global var, how do import in ionic 2 ,am using the npm module ,and tried
import * as parse from 'parse'
Do npm install parse --save in your project directory
Then import parse using
import { Parse } from 'parse';
It is better to create an parse provider.
You can use this starter template as a guide. It is a simple GameScores application in ionic to get you started.
https://github.com/Reinsys/Ionic-Parse
It shows how to create and read data from parse server. I also includes paging with ion-infinite-scroll scrolling.
After searching for a solution I came up with my own.
After installing the package and the typings, I opened the index.js of the node-module ionic-gulp-scripts-copy and added 'node_modules/parse/dist/parse.min.js' to the defaultSrc array.
Then, in my index.html, I included the script above the cordova.js.
Now I just need to declare var Parse: any; in every Component I want to use the SDK in.
For example, in my app.ts:
import {Component} from '#angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import{LoginPage} from './pages/login/login';
declare var Parse: any;
#Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class MyApp {
private rootPage: any;
private parse;
constructor(private platform: Platform) {
//this.rootPage = TabsPage;
this.rootPage = LoginPage;
platform.ready().then(() => {
console.log("Platform ready!");
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Parse.initialize('myStartUp', 'someKey');
Parse.serverURL = 'http://localhost:1337/parse';
});
}
}
ionicBootstrap(MyApp);
I do not think this is the way it should be used, but in the end I can use the SDK pretty easy and without much lines of implementation code.

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.

Categories

Resources