I was try use ngx-socket-io iPackage s not work in anguler JS
https://www.npmjs.com/package/ngx-socket-io Example But Not work.
let know any one if any other package to use in angular js.
npm install ngx-socket-io
Moddule.js
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SocketIoModule.forRoot(config)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ChatService.js
import { Injectable } from '#angular/core
import { Socket } from 'ngx-socket-io'
#Injectable()
export class ChatService {
constructor(private socket: Socket) { }
assign_biker(biker_id){
this.socket.emit("assign_biker_order",{'biker_id:biker_id })
}
}
Do you Try socket client angular package ?
it so easy to use and worked in angular js.
Install first socket.io-client.
npm i socket.io-client
import * as io from 'socket.io-client';
private socket;
constructor() {
this.socket = io('here is your socket url');
}
assign_biker(biker_id){
this.socket.emit("assign_biker_order",{'biker_id:biker_id })
}
Related
I'm trying to import SequelizeModule in my app.module.ts but I got the following error:
[Nest] ERROR [ExceptionHandler] Nest can't resolve dependencies of the
SequelizeCoreModule (SequelizeModuleOptions, ?). Please make sure that
the argument ModuleRef at index [1] is available in the
SequelizeCoreModule context.
app.module.ts
import { Module } from '#nestjs/common';
import { ModuleRef } from '#nestjs/core';
import { SequelizeModule } from '#nestjs/sequelize';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { TweetsController } from './tweets/tweets.controller';
import { TweetsModule } from './tweets/tweets.module';
import { TweetsService } from './tweets/tweets.service';
#Module({
imports: [
SequelizeModule.forRoot({
dialect: 'sqlite',
autoLoadModels: true,
synchronize: true,
host: join(__dirname, 'database.sqlite'),
}),
TweetsModule,
],
controllers: [AppController, TweetsController],
providers: [AppService, TweetsService],
})
export class AppModule {}
this happens when you have multiple nodejs modules loaded for the same #nestjs/core package. See them by running npm ls #nestjs/core. You can solve that by getting ride of those packages somehow and keeping only the one that your app depends on directly. Read the docs: https://docs.nestjs.com/faq/common-errors#cannot-resolve-dependency-error
I'm trying to export a custom middleware project in NestJS to all my other projects(and import this in all of them). My actual class is acl-jwt.middleware.ts in its bootstrap src folder.
In the acl-jwt.middleware.ts I have:
import { Injectable, NestMiddleware, } from '#nestjs/common';
#Injectable()
export class AclJwtMiddleware implements NestMiddleware {
use(req: any, res: any, next: () => void) {
console.log("ACL JWT Middleware !!")
next();
}
}
and my app.module.ts has:
import { Module, NestModule, MiddlewareConsumer, RequestMethod } from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { AclJwtMiddleware } from './acl-jwt.middleware';
#Module({
imports: [],
controllers: [AppController],
providers: [AppService],
})
export class AppModule implements NestModule {
configure(consumer: MiddlewareConsumer) {
consumer.apply(AclJwtMiddleware).forRoutes({ path: '*', method: RequestMethod.ALL });
}
}
And in my another project's app.module.ts, I'm importing this like the following
import { AclJwtMiddleware } from 'mi';
#Module({
imports: [],
controllers: [AppController],
providers: [AppService],
})
export class AppModule implements NestModule {
configure(consumer: MiddlewareConsumer) {
consumer.apply(AclJwtMiddleware).forRoutes({ path: '*', method: RequestMethod.ALL });
}
}
mi is my hosted package.
And then when I run my second project, I get the following error:
src/app.module.ts:16:34 - error TS2307: Cannot find module 'mi' or its corresponding type declarations.
16 import { AclJwtMiddleware } from 'mi';
Am I not exporting something? Or am I not importing it properly?
I've been searching all over the internet but I couldn't find something with my use case. Any help would be really good. Thank you all! :)
You'd need to make sure that in your package.json of your mi package, you have either main or files that points to the properly exported file/directory. If it is a barrel file, like index.js, then you need to make sure it exports the middleware properly.
I was learning to call node from angular,in my component i had the following code
import { Component, OnInit } from '#angular/core';
import {GetvalidationService} from '../_services/getvalidation.service';
#Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
constructor(private service:GetvalidationService) { }
ngOnInit(): void {
this.getStudentData();
}
studentDetails :any =[]
getStudentData(){
this.service.getStudentData().subscribe()
}
}
the service is defined as followed
import { Injectable } from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class GetvalidationService {
constructor(private http:HttpClient) { }
authenticateLogin(userDetails){
return this.http.post("/api/login",userDetails)
}
getStudentData(){
return this.http.get("/api/student");
}
}
and I have done the proxy.conf.json setting in package.json as well
my proxy.conf.json looks like
{
"/api/*":{
"target":"http://localhost:3000",
"secure": false,
"changeOrigin": true,
"pathrewrite":{"^/api":""}
}
}
inspite of this when i make a call for student the angular service makes call to http://localhost:4200/api/student instead of the node service on port 3000 where would i be going wrong ? I use npm run start to start the angular app
You have to define your baseUrl, if you do not do that then you end up with one you defined in your angular port options, i.e. localhost:4200.
So the piece of code required to connect to the node is this:
I suggest keeping the api url in environment, so that you can easily move it around different environments like this:
export const environment = {
production: false,
api: 'http://localhost:3000'
};
Your Service ts file will then include the api from enviornment:
import { Injectable } from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class GetvalidationService {
private baseUrl= environment.api + '/api'; // URL to your web api
constructor(private http:HttpClient) { }
authenticateLogin(userDetails){
return this.http.post(`${this.baseUrl}/login`,userDetails)
}
getStudentData(){
return this.http.get(`${this.baseUrl}/student`);
}
}
I've set up an Angular 8 Project with Angular Universal. To prevent duplicate HTTP Calls, Angular offers TransferHttpCacheModule.
I followed the official Documentation to add TransferHttpCacheModule to Angular (https://github.com/angular/universal/blob/master/docs/transfer-http.md)
I also tried to add the BrowserTransferStateModule (https://www.twilio.com/blog/faster-javascript-web-apps-angular-universal-transferstate-api-watchdog), but this doesn't work either.
app.module.ts
import {BrowserModule} from '#angular/platform-browser';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {TransferHttpCacheModule} from "#nguniversal/common";
#NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule.withServerTransition({appId: 'serverApp'}),
TransferHttpCacheModule, // <-
...
HttpClientModule
]
bootstrap: [AppComponent]
})
export class AppModule {
}
app.server.module.ts
import {NgModule} from '#angular/core';
import {ServerModule, ServerTransferStateModule} from '#angular/platform-server';
import {AppModule} from './app.module';
import {AppComponent} from './app.component';
import {ModuleMapLoaderModule} from '#nguniversal/module-map-ngfactory-loader';
#NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule,
ServerTransferStateModule // <-
],
bootstrap: [AppComponent],
})
export class AppServerModule {
}
main.ts
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
});
My Api Service
api.service.ts
import {Injectable} from '#angular/core';
import {HttpClient} from '#angular/common/http';
import {Observable} from "rxjs";
#Injectable({
providedIn: 'root'
})
export class ApiService {
private API_URL = '/api/';
constructor(private http: HttpClient) {
}
public get<T>(url: string): Observable<T> {
return this.http.get<T>(this.API_URL + url);
}
public post<T>(url: string, payload: T): Observable<T> {
return this.http.post<T>(this.API_URL + url, payload);
}
...
}
HTTP Call
home.component.ts
import {Component, OnInit} from '#angular/core';
import {ApiService} from "../../api.service";
import {Offer} from "../../offer-preview/offer.model";
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.sass']
})
export class HomeOffersComponent implements OnInit {
latestOffers: Offer[];
constructor(private apiService: ApiService) {
}
ngOnInit() {
this.apiService.get<Offer[]>("offer")
.subscribe(data => this.latestOffers = data);
}
}
According to the official TransferHttpCacheModule Docs, the Browser should not make an XHR to /api/offer, but the i see the XHR Call in the Developer Network Tools.
What am i doing wrong? Did I miss anything?
This is because of a mismatch between the absolute URLs the TransferHttpCacheModule is using as cache key for each request.
For example:
Server
Client
baseUrl
localhost:4200
domain.com
ressource
/api/people
/api/people
Absolute URL
http://localhost:4200/api/people
https://example.com/api/people
Only if both Absolute URLs are the same the request is successfully cached.
To circumvent this shortcoming you can implement your own caching via the BrowserTransferStateModule and Interceptors, e.g. as described here.
Just be sure to only use the relative URL:
const url = new URL(req.url);
const rel = url.toString().substring(url.origin.length);
this.transferState.set(makeStateKey(rel), event.body);
I've built my Angular 4 project using the Angular CLI.
I am deploying my app on Heroku, I've created heroku pipelines for dev and production environment.
I have two firebase database dev and production and I want my angular 2 apps to connect to the firebase database based on heroku config variables
I searched on google and found this answer helpful as #yoni-rabinovitch suggested to send an HTTP request on node server to check for the environment when the app initializes.
I am a beginner in Angular 4 and typescript and all I need to implement is to send an HTTP request and initialize the firebase module based on the response.
app.module.ts
import { environment } from '../environments/environment';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AngularFireModule.initializeApp(environment.firebase)
],
bootstrap: [AppComponent]
})
export class AppModule {}
Any help would be highly appreciated
I had to create an API on my server and set the function below in environments.ts file.
export let environment: any = {
production: false,
firebase: {...}
};
export const setEnvironment = async () => {
try {
const response = await fetch('api/checkEnvironment');
const json = await response.json();
if (json.data?.isPROD) {
// Prod Environment
environment = {
production: true,
firebase: {...}
};
}
} catch (error) {
throw error;
}
};
and call it from main.ts file
import {
environment,
setEnvironment,
} from './environments/environment';
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { FIREBASE_OPTIONS } from '#angular/fire';
(async () => {
await setEnvironment();
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic([
{
provide: FIREBASE_OPTIONS,
useValue: environment.firebase,
},
])
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
})();
You can create a function to receive the configuration:
import { environment } from '../environments/environment';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AngularFireModule.initializeApp(AppModule.getFirebaseConfig())
],
bootstrap: [AppComponent]
})
export class AppModule {
static getFirebaseConfig(): FirebaseAppConfig {
// do http request
// return correct correct configuration depending on http request
return environment.firebase;
}
}