how integrate in our admin panel

[singhsandeepsln]

how integrate in our admin panel Angular CLI: 1.7.4 Node: 10.16.0 OS: linux x64 Angular: 5.2.11

[singhsandeepsln]

WARNING in ./node_modules/@angular/cdk/esm5/platform.es5.js 102:50-68 "export 'ɵɵdefineInjectable' was not found in '@angular/core'

[singhsandeepsln]

getting error

Socket.js:4 Uncaught ReferenceError: global is not defined
    at Object../node_modules/@xmpp/plugins/websocket/lib/Socket.js (Socket.js:4)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@xmpp/plugins/websocket/lib/Connection.js (Connection.js:3)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@xmpp/plugins/websocket/index.js (index.js:3)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@pazznetwork/ngx-chat/fesm5/pazznetwork-ngx-chat.js (pazznetwork-ngx-chat.js:1)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/app.component.ts (main.js:9906)
    at __webpack_require__ (bootstrap:76)
./node_modules/@xmpp/plugins/websocket/lib/Socket.js @ Socket.js:4
__webpack_require__ @ bootstrap:76
./node_modules/@xmpp/plugins/websocket/lib/Connection.js @ Connection.js:3
__webpack_require__ @ bootstrap:76
./node_modules/@xmpp/plugins/websocket/index.js @ index.js:3
__webpack_require__ @ bootstrap:76
./node_modules/@pazznetwork/ngx-chat/fesm5/pazznetwork-ngx-chat.js @ pazznetwork-ngx-chat.js:1
__webpack_require__ @ bootstrap:76
./src/app/app.component.ts @ main.js:9906
__webpack_require__ @ bootstrap:76
./src/app/app.module.ts @ app.component.ts:26
__webpack_require__ @ bootstrap:76
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:76
5 @ main.js:10216
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
(anonymous) @ bootstrap:134
(anonymous) @ bootstrap:134
client?e0b3:52 

[trampi]

Hi @singhsandeepsln,

We do not support Angular 5.

As said in the requirements, you have to use Angular 6, support for Angular 8 is coming in the next days. We will skip Angular 7.

Do not hesitate to ask again or reopen the ticket if you have further questions!

[singhsandeepsln]

getting error

Uncaught TypeError: Object(...) is not a function
    at platform.es5.js:102
    at Object../node_modules/@angular/cdk/esm5/platform.es5.js (platform.es5.js:104)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@angular/cdk/esm5/text-field.es5.js (text-field.es5.js:1)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@pazznetwork/ngx-chat/fesm5/pazznetwork-ngx-chat.js (pazznetwork-ngx-chat.js:1)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/app.component.ts (main.js:9906)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/app.module.ts (app.component.ts:26)
(anonymous) @ platform.es5.js:102
./node_modules/@angular/cdk/esm5/platform.es5.js @ platform.es5.js:104
__webpack_require__ @ bootstrap:76
./node_modules/@angular/cdk/esm5/text-field.es5.js @ text-field.es5.js:1
__webpack_require__ @ bootstrap:76
./node_modules/@pazznetwork/ngx-chat/fesm5/pazznetwork-ngx-chat.js @ pazznetwork-ngx-chat.js:1
__webpack_require__ @ bootstrap:76
./src/app/app.component.ts @ main.js:9906
__webpack_require__ @ bootstrap:76
./src/app/app.module.ts @ app.component.ts:26
__webpack_require__ @ bootstrap:76
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:76
5 @ main.js:10216
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
(anonymous) @ bootstrap:134
(anonymous) @ bootstrap:134
client?e0b3:52 [WDS] Live Reloading enabled.
client?e0b3:126 [WDS] Warnings while compiling.
warnings @ client?e0b3:126
(anonymous) @ socket.js:40
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
client?e0b3:135 ./node_modules/@angular/cdk/esm5/platform.es5.js
102:130-138 "export 'ɵɵinject' was not found in '@angular/core'
warnings @ client?e0b3:135
(anonymous) @ socket.js:40
sock.onmessage @ SockJSClient.js:58
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1332
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770

Angular CLI: 6.0.8 Node: 10.16.0 OS: linux x64 Angular: 6.1.10

[trampi]

Please provide the output of ng -v. Could you upload a Minimal, Reproducible Example, e.g. in a repository on GitHub?

[singhsandeepsln]

Angular CLI: 6.0.8 Node: 10.16.0 OS: linux x64 Angular: 6.1.10

[singhsandeepsln]

I have simply created new project using ng new chat and followed installation instruction given in your repository

inside app-component-html `

XMPP domain (e.g. jabber.example.com)

<div class="form-group">
    <div>
        Host Websocket endpoint
        <small>(e.g. wss://jabber.example.com:5280/websocket)</small>
    </div>
    <div>
        <input name="uri" [(ngModel)]="uri" class="form-control" type="text" placeholder="wss://jabber.example.com:5280/websocket"/>
    </div>
</div>

<div class="form-group">
    <div>
        JID
        <small>(e.g. test@jabber.example.com)</small>
    </div>
    <div>
        <input name="jid" [(ngModel)]="jid" class="form-control" type="text" placeholder="test@jabber.example.com"/>
    </div>
</div>

<div class="form-group">
    <div>
        Password
    </div>
    <div>
        <input name="password" [(ngModel)]="password" class="form-control" type="password" placeholder="Password"/>
    </div>
</div>

<div>
    <button name="login" (click)="onLogin()">Log in</button>
    <button name="logout" (click)="onLogout()">Log out</button>
    <button name="register" (click)="onRegister()">Register</button>
    <button name="reconnect" (click)="onReconnect()">Reconnect</button>
</div>

<div>State: {{chatService.state$ | async}} (internal state: {{client.status}})</div>

<div *ngIf="registrationMessage">
    <p>{{registrationMessage}}</p>
</div>

<hr/>

<div class="form-group">
    <div>
        Contact Management
    </div>
    <div>
        <input [(ngModel)]="otherJid" class="form-control" type="text" placeholder="JID"/>
    </div>
</div>

<button (click)="onAddContact()">Add contact</button>
<button (click)="onRemoveContact()">Remove contact</button>
<button (click)="onOpenChat()">Open chat</button>

<hr/>

<button (click)="chatService.enableDebugging = !chatService.enableDebugging">Enable debugging</button>
<button (click)="onToggleContactList()">Toggle contact list</button>

<div>
    <h2>Custom component for a chat session</h2>
    <ng-container *ngIf="(chatService.contactsSubscribed$ | async).length > 0; else messagesComponentInformation">
        <ngx-chat-message-list [contact]="(chatService.contactsSubscribed$ | async)[0]"
                               [showAvatars]="true"></ngx-chat-message-list>
        <ngx-chat-message-input [contact]="(chatService.contactsSubscribed$ | async)[0]"></ngx-chat-message-input>
    </ng-container>
    <ng-template #messagesComponentInformation>You need to be logged in and have contacts to see this component</ng-template>
</div>

<hr/>

<!-- <app-iq></app-iq>

<app-send-stanza></app-send-stanza>

<app-multi-user-chat></app-multi-user-chat> -->

<div>
    <h2>Unread messages count:</h2>
    Sum unread messages: {{unreadMessageCountPlugin.unreadMessageCountSum$ | async}}
    <pre>{{unreadMessageCountPlugin.jidToUnreadCount$ | async | json}}</pre>
</div>

<ngx-chat rosterState="shown" [contacts]="contacts">

` and app-component-ts `import { Component, Inject } from 'node_modules/@angular/core'; import { jid } from '@xmpp/jid'; import { Observable, of } from '../../node_modules/rxjs'; import { ChatBackgroundNotificationService, ChatListStateService, ChatService, ChatServiceToken, Contact, ContactFactoryService, LogLevel, LogService, MultiUserChatPlugin, RegistrationPlugin, UnreadMessageCountPlugin, XmppClientToken, } from '../../node_modules/@pazznetwork/ngx-chat'; import { Client } from '@xmpp/client-core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public domain: string; public uri: string; public password: string; public jid: string; public otherJid: any; public contacts: Observable = this.chatService.contactsSubscribed$; public multiUserChatPlugin: MultiUserChatPlugin; public unreadMessageCountPlugin: UnreadMessageCountPlugin; public registrationMessage: string; constructor(@Inject(ChatServiceToken) public chatService: ChatService, @Inject(XmppClientToken) public client: Client, private contactFactory: ContactFactoryService, private logService: LogService, private chatListStateService: ChatListStateService, chatBackgroundNotificationService: ChatBackgroundNotificationService) { const contactData: any = JSON.parse(localStorage.getItem('data')) || {}; this.logService.logLevel = LogLevel.Debug; this.domain = contactData.domain; this.uri = contactData.uri; this.password = contactData.password; this.jid = contactData.jid; this.chatService.state$.subscribe((state) => this.stateChanged(state)); this.multiUserChatPlugin = this.chatService.getPlugin(MultiUserChatPlugin); this.unreadMessageCountPlugin = this.chatService.getPlugin(UnreadMessageCountPlugin); chatBackgroundNotificationService.enable(); // @ts-ignore window.chatService = chatService; } onLogin() { const logInRequest = { domain: this.domain, uri: this.uri, password: this.password, jid: this.jid, }; localStorage.setItem('data', JSON.stringify(logInRequest)); this.chatService.logIn(logInRequest); } onLogout() { this.chatService.logOut(); } async onRegister() { this.registrationMessage = 'registering ...'; try { await this.chatService.getPlugin(RegistrationPlugin).register( jid(this.jid).local, this.password, this.uri, this.domain ); this.registrationMessage = 'registration successful'; } catch (e) { this.registrationMessage = 'registration failed: ' + e.toString(); throw e; } } onAddContact() { this.chatService.addContact(this.otherJid); } onRemoveContact() { this.chatService.removeContact(this.otherJid); } onToggleContactList() { if (this.contacts === this.chatService.contactsSubscribed$) { this.contacts = of([ this.contactFactory.createContact('user@host', 'user1'), this.contactFactory.createContact('user2@host', 'user2'), ]); } else { this.contacts = this.chatService.contactsSubscribed$; } } onOpenChat() { this.chatListStateService.openChat(this.chatService.getOrCreateContactById(this.otherJid)); } private async stateChanged(state: 'disconnected' | 'connecting' | 'online') { console.log('state changed!', state); } onReconnect() { this.chatService.reconnect(); } } `

[trampi]

Please add the following to the bottom of your polyfills.ts:

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
(window as any).global = window;

[singhsandeepsln]

Please add the following to the bottom of your polyfills.ts:

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
(window as any).global = window;

after adding i am getting error in web console Uncaught TypeError: Object(...) is not a function at platform.es5.js:102 at Object../node_modules/@angular/cdk/esm5/platform.es5.js (platform.es5.js:104) at webpack_require__ (bootstrap:76) at Object../node_modules/@angular/cdk/esm5/text-field.es5.js (text-field.es5.js:1) at webpack_require (bootstrap:76) at Object../node_modules/@pazznetwork/ngx-chat/fesm5/pazznetwork-ngx-chat.js (pazznetwork-ngx-chat.js:1) at __webpack_require (bootstrap:76) at Object../src/app/app.component.ts (main.js:9906) at webpack_require__ (bootstrap:76) at Object../src/app/app.module.ts (app.component.ts:26) (anonymous) @ platform.es5.js:102 ./node_modules/@angular/cdk/esm5/platform.es5.js @ platform.es5.js:104 webpack_require @ bootstrap:76 ./node_modules/@angular/cdk/esm5/text-field.es5.js @ text-field.es5.js:1 __webpack_require @ bootstrap:76 ./node_modules/@pazznetwork/ngx-chat/fesm5/pazznetwork-ngx-chat.js @ pazznetwork-ngx-chat.js:1 webpack_require @ bootstrap:76 ./src/app/app.component.ts @ main.js:9906 webpack_require @ bootstrap:76 ./src/app/app.module.ts @ app.component.ts:26 webpack_require @ bootstrap:76 ./src/main.ts @ main.ts:1 webpack_require @ bootstrap:76 5 @ main.js:10216 __webpack_require__ @ bootstrap:76 checkDeferredModules @ bootstrap:43 (anonymous) @ bootstrap:134 (anonymous) @ bootstrap:134 client:52 [WDS] Live Reloading enabled. client:126 [WDS] Warnings while compiling. warnings @ client:126 (anonymous) @ socket.js:40 sock.onmessage @ SockJSClient.js:58 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:887 SockJS._transportMessage @ sockjs.js:885 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2961 wrapFn @ zone.js:1332 ./node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423 ./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195 ./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498 invokeTask @ zone.js:1744 globalZoneAwareCallback @ zone.js:1770 client:135 ./node_modules/@angular/cdk/esm5/platform.es5.js 102:130-138 "export 'ɵɵinject' was not found in '@angular/core'

[trampi]

I created a fresh, working angular 6 sample app for you. https://github.com/trampi/ngx-chat-angular6 Can you reproduce your problem there?

By the way, please post the complete output of ng -v, because it looks like you might have a dependency problem. It should look like this:

Angular CLI: 6.0.8
Node: 10.15.1
OS: darwin x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.0.2
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.8.3

Have you tried to rm -rf node_modules and reinstall your dependencies?

[singhsandeepsln]

please check the complete output of ng -v `Angular CLI: 1.7.4 Node: 10.16.0 OS: linux x64 Angular: 6.1.10 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, platform-server, router

@angular/cli: 1.7.4 @angular-devkit/build-optimizer: 0.3.2 @angular-devkit/core: 0.3.2 @angular-devkit/schematics: 0.3.2 @ngtools/json-schema: 1.2.0 @ngtools/webpack: 1.10.2 @schematics/angular: 0.3.2 @schematics/package-update: 0.3.2 typescript: 2.7.2 webpack: 3.11.0`

[trampi]

please run ng -v in your project directory. You are missing @angular/cdk. Does the sample app linked above work?