💬 A simple facebook/linkedin lookalike chat module for Angular applications.
MIT License
155
stars
92
forks
source link
ng-chat can't be bootstrapped without a ChatAdapter. Please make sure you've provided a ChatAdapter implementation as a parameter of the ng-chat component. #148
ngOnInit() {
this.user = JSON.parse(localStorage.getItem('userDetail'));
this.userId = this.user.id;
console.log("this is the userId : " + this.userId);
this.userName = this.user.name;
console.log("this is the user name : " + this.userName);
this.joinRoom();
i'm trying to integrate ng-chat into my angular app and i run into this error. has anyone encountered this before?
`
ng-chat demo
Login
Pick a username to join a ng-chat node.js room. Hint: Try different browsers or incognito tabs.<ng-chat [adapter]="adapter" [userId]="userId" [historyEnabled]="true" [theme]="'dark-theme'">`
my .ts file: `import { Component, OnInit } from '@angular/core'; import { ChatService } from './chat.service'; import { ChatAdapter, ParticipantResponse, User, Message } from 'ng-chat'; import { Socket, SocketIoConfig } from 'ng-socket-io'; import { SocketIOAdapter } from './socketio-adapter'; import { HttpClient } from '@angular/common/http'; import { Http } from '@angular/http'; const config: SocketIoConfig = { url: 'http://proficient.simbiotiktech.com:4000', options: {} };
@Component({ selector: 'app-global-chat', templateUrl: './global-chat.component.html', styleUrls: ['./global-chat.component.css'] }) export class GlobalChatComponent implements OnInit {
// properties user; message; userName; userId; public adapter: ChatAdapter; data; chatUserEmail: string = ""; chatId: string; chatUserId: string = String(Math.floor(Math.random() * 100)); chatUserStatus: string; userAvatar: string
constructor(private http: Http, private httpClient: HttpClient, private socket: Socket) {
}
ngOnInit() { this.user = JSON.parse(localStorage.getItem('userDetail')); this.userId = this.user.id; console.log("this is the userId : " + this.userId); this.userName = this.user.name; console.log("this is the user name : " + this.userName); this.joinRoom();
}
// joinRoom() { // console.log('join room clicked'); // this.chatServie.joinRoom(this.userName); // }
// sendMessages() { // this.chatServie.sendMessage(this.message); // }
public joinRoom(): void { const data = { userId: this.userId, userName: this.userName };
}
getMessages() {
}
public InitializeSocketListerners(): void { //console.log(socket); this.socket.on("generatedUserId", (userId) => { // Initializing the chat with the userId and the adapter with the socket instance
//console.log(userCollect); if (this.userId == "") { //this.userId = userId['socketId']; this.userId = userId; //console.log(this.userId) //this.adapter = new SocketIOAdapter(this.chatUserId, this.userId, this.useremail, this.projectId, this.socket, this.http); this.adapter = new SocketIOAdapter(this.userId, this.socket, this.http, this.httpClient); //console.log(usersCollection.filter(x => x.participant.id != this.chatId)); //this.adapter.onFriendsListChanged(usersCollection.filter(x => x.participant.id != this.userId)); }
}
}
app.module imports :
const config: SocketIoConfig = { url: 'http://proficient.simbiotiktech.com:4000', options: {} };@NgModule({ declarations: [ AppComponent, MainHeaderComponent, SideMenuComponent, DragDropDirective, TestComponent, LoginComponent, ForgotPasswordComponent, SuccessModalComponent, LoadingModalComponent, ReminderComponent, ConfirmationComponent, CancelModalComponent, ContactAddressComponent, GlobalNotificationComponent, GlobalChatComponent,
], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, MaterialModule, NgSelectModule, HttpClientModule, SharedModule, ChartsModule, FullCalendarModule, UserAccountModule, HttpModule, NgChatModule, SocketIoModule.forRoot(config)
], entryComponents: [SuccessModalComponent, LoadingModalComponent, ReminderComponent, ConfirmationComponent, CancelModalComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [CommonProvider, UploadProvider, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true }], bootstrap: [AppComponent] }) export class AppModule { } `