Im using Event fucntion to publish some data in app. But its not working in ionic 4. I need to know ionic 4 support Events or not?
import { Events } from '#ionic-angular';
// Module not found: Error: Can't resolve '#ionic-angular'
You can use #angular/Events
//MyEvents Service Page
import { Injectable } from '#angular/core';
import { Subject, Observable } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class EventsService {
constructor() { }
private subject = new Subject<any>();
sendMessage(text){
this.subject.next(text);
}
getMessage():Observable<any>{
return this.subject.asObservable();
}
}
//Page for sendMessage
constructor(private events: EventsService) {
this.events.sendMessage({'created':1}); //send message key-value format
}
//Page for getMessage
subscription: Subscription;
constructor(private events: EventsService) {
this.subscription = this.events.getMessage().subscribe(text => {
console.log(text.created);
})
}
Below solution is working in ionic v4
import { Events } from '#ionic/angular';
constructor(private events: Events) {
events.subscribe('notificationLength', notilen => {
//TO DO`enter code here`
})
}
// Publish the events where ever you want
this.events.publish('notificationLength', this.NotificationList.length)
The problem was in the version. When I updated to the latest patch of version 4, it was working.
npm i #ionic/angular#4.11.10
Related
I created a custom passport for authentication, as described here: https://docs.nestjs.com/security/authentication.
My problem is a different behavior between importing the passport I created from a local folder versus installing it from a package. When I install it from a package, I get 500 error when providing wrong credentials (works fine with valid credentials), while getting 401 error when using it locally.
This is how I use it locally and it works:
import { Controller, Get, UseGuards } from '#nestjs/common';
import { AppService } from './app.service';
import { AuthGuard } from '#nestjs/passport';
import { ApiKeyAuthGuard } from './auth/guards/api-key-auth.guard';
#Controller()
#UseGuards(AuthGuard('api-key'))
export class AppController {
constructor(
private readonly appService: AppService,
) {}
#Get()
getHello(){}
}
But when I import it from an installed package and I provide wrong credentials, I'm getting 500 error:
import { ApiKeyAuthGuard } from 'shared-auth-package';
api-key.strategy.js:
import { PassportStrategy } from '#nestjs/passport';
import {
fromAuthHeaderAsApiKey,
Strategy,
} from '../passports/passport-api-key/strategy';
import { InjectRepository } from '#nestjs/typeorm';
import { UnauthorizedException } from '#nestjs/common';
import { Repository } from 'typeorm';
import { TokenEntity } from '../../lib/entity/token.entity';
import { UserEntity } from '../../lib/entity/user.entity';
export class ApiKeyStrategy extends PassportStrategy(Strategy, 'api-key') {
constructor(
#InjectRepository(TokenEntity, process.env.mysql_connection_name)
private tokenRepository: Repository<TokenEntity>,
) {
super({
tokenFunc: fromAuthHeaderAsApiKey(),
passReqToCallback: false,
});
}
async validate(token: string): Promise<UserEntity> {
let user: UserEntity;
const tokenEntity = await this.tokenRepository
.createQueryBuilder('t')
.innerJoinAndSelect('t.user', 'u')
.where('t.token = :token', { token })
.getOne();
if (tokenEntity && tokenEntity.user_id && tokenEntity.validateToken()) {
user = tokenEntity.user;
}
if (!user) {
throw new UnauthorizedException('Invalid credentials');
}
return user;
}
}
api-key-auth.guard.ts:
import { AuthGuard } from '#nestjs/passport';
export class ApiKeyAuthGuard extends AuthGuard('api-key') {}
I have Spartacus storefront app.
Spartacus version is 3.2.2.
I have the requirement to check if the page is loaded in smart edit or not.
For that I tried to use this.smartEditService.isLaunchedInSmartEdit() but it always returns null value.
Please help me to find solution.
Below is my sample service code.
import { Product, ProductService, RoutingService, CmsService, SmartEditService } from '#spartacus/core';
import { Observable } from 'rxjs';
#Injectable({
providedIn: 'root',
})
export class CurrentProductService {
constructor(
private smartEditService: SmartEditService
) {
}
getProduct(): Observable<Product> {
if (this.smartEditService && this.smartEditService.isLaunchedInSmartEdit()) {
return false
}
return true;
}
}
From 3.2, the SmartEditModule is deprecated. You can either import the deprecated SmartEditModule (from core) in your app, or use the SmartEditService from #spartacus/smartedit lib.
I'm using this npm library https://www.npmjs.com/package/ng-offline to alert end user when offline.
<div class="alert alert-danger" ngOffline>You're offline. Check your connection!</div>
stackblitz here: https://stackblitz.com/edit/angular-ngoffline-npm?file=src%2Fapp%2Fapp.component.html
Works great - BUT I want to open a modal with this ngOffline directive, so I'm trying to access the directive from my angular 11 component but not sure how to approach this, any help on this would be greatly appreciated.
Is there away for me to open a ngx-bootstrap modal from the html with this directive?
Because the ng-offline module isn't exporting things as you might expect (i.e. you can't inject a standalone NgOfflineDirective for you to use without having it in your html file), you could add a block like this (where you've used #trigger to identify your ngOnline element):
import { AfterContentChecked, Component, ElementRef, OnDestroy, ViewChild } from '#angular/core';
import { BehaviorSubject, Subscription } from 'rxjs';
import { distinctUntilChanged, filter } from 'rxjs/operators';
#Component({ ... })
export class YourClass implements AfterContentChecked, OnDestroy {
offline$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>();
subscription: Subscription;
#ViewChild('trigger') trigger: ElementRef;
constructor() {
this.subscription = this.offline$.pipe(
distinctUntilChanged(),
filter((offline: boolean) => offline),
).subscribe(() => this.showModal());
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
ngAfterContentChecked() {
if (
this.trigger &&
this.trigger.nativeElement
) {
this.offline$.next(this.trigger.nativeElement.style.display === "none");
}
}
showModal() {
console.log('Show your modal here.');
}
}
My http method returns results when it is contained in my component, but does not return any results when called from a service located one directory up.
I've checked the console and there are no errors. I have tried printing to the console, which works from within the service (returns the desired data), but does not when run from within the child component.
This is the service that I'm trying to build:
import { Injectable } from '#angular/core';
import { Resturant } from '../../models/resturant.model'
import { HttpClient } from '#angular/common/http';
import { map } from 'rxjs/operators';
#Injectable({
providedIn: 'root'
})
export class GetResturantsService {
fullListresturants: Resturant[];
constructor(private http:HttpClient) { }
fetchList(){
this.http.get('https://lunchlads.firebaseio.com/posts.json')
.pipe(map(responseData =>{
const postsArray: Resturant[] = [];
for (const key in responseData) {
if (responseData.hasOwnProperty(key)){
postsArray.push({ ...responseData[key], id:key })
}
}
return postsArray;
}))
.subscribe(posts => {
// this.fullListresturants = posts;
});
}
}
This is the component which is one file down in the directory:
import { Component, OnInit } from '#angular/core';
import { Resturant } from '../../../models/resturant.model'
import { GetResturantsService } from '../get-resturants.service'
import { HttpClient } from '#angular/common/http';
//import { map } from 'rxjs/operators';
#Component({
selector: 'app-list-all',
templateUrl: './list-all.component.html',
styleUrls: ['./list-all.component.css']
})
export class ListAllComponent implements OnInit {
fullListresturants: Resturant;
constructor(private http:HttpClient, private listAllResturants:GetResturantsService) { }
ngOnInit() {
this.onfullList();
}
onfullList(){
this.fullList();
}
private fullList(){
// this.http.get('https://lunchlads.firebaseio.com/posts.json')
// .pipe(map(responseData =>{
// const postsArray: Resturant[] = [];
// for (const key in responseData) {
// if (responseData.hasOwnProperty(key)){
// postsArray.push({ ...responseData[key], id:key })
// }
// }
// return postsArray;
// }))
// .subscribe(posts => {
// // this.fullListresturants = posts;
// });
this.listAllResturants.fetchList();
}
}
The firebase backend contains roughly 10 records with a name:string, votes:number, and selected:number fields. When run from the component, the html file simply returns the name values with an *ngFor loop.
When run from the service, nothing is returned and no errors are reported in the console.
I suspect the problem lies somewhere in how I am calling the fetchList method from the component, but google and me have not been able to suss out what I'm doing wrong.
Your service should return an observable to make it work. As per your current code, you are not returning anything from GetResturantsService.fetchList(). To make it work let change the service like this:
export class GetResturantsService {
fullListresturants: Resturant[];
constructor(private http:HttpClient) { }
fetchList(){
return this.http.get('https://lunchlads.firebaseio.com/posts.json')
.pipe(map(responseData =>{
const postsArray: Resturant[] = [];
for (const key in responseData) {
if (responseData.hasOwnProperty(key)){
postsArray.push({ ...responseData[key], id:key })
}
}
return postsArray;
}));
}
}
Now in component subscribe to the observable returned from fetchList method like this:
export class ListAllComponent implements OnInit {
fullListresturants: Resturant;
constructor(private http:HttpClient, private listAllResturants:GetResturantsService) { }
ngOnInit() {
this.onfullList();
}
onfullList(){
this.fullList();
}
private fullList(){
this.listAllResturants.fetchList()
.subscribe(posts => {
//DO whatever you want to do with posts
this.fullListresturants = posts;
});
}
}
Hope it helps.
Everyone,
I'm trying to setup my first NestJS application. It is backed by Serverless on AWS.
I created a simple Controller that has a Service as a dependency. When I hit the endpoint with my HTTP Client, the object that should contain the Service instance is undefined. I'm not able to make it work. Could you help?
handler.ts
import { Context, Handler } from 'aws-lambda';
import { NestFactory } from '#nestjs/core';
import { AppModule } from './src/module';
import { Server } from 'http';
import { ExpressAdapter } from '#nestjs/platform-express';
import * as serverless from 'aws-serverless-express';
import * as express from 'express';
import {DB} from './src/libs/db';
let cachedServer: Server;
function bootstrapServer(): Promise<Server> {
const expressApp = express();
const adapter = new ExpressAdapter(expressApp);
return NestFactory.create(AppModule, adapter)
.then(app => app.enableCors())
.then(app => app.init())
.then(() => DB.connect())
.then(() => serverless.createServer(expressApp));
}
export const handle: Handler = (event: any, context: Context) => {
if (!cachedServer) {
bootstrapServer().then(server => {
cachedServer = server;
return serverless.proxy(server, event, context);
});
} else {
return serverless.proxy(cachedServer, event, context);
}
};
module.ts
import { Module } from '#nestjs/common';
import { EventController } from './event.controller';
import { EventService } from './event.service';
#Module({
controllers: [EventController],
providers: [EventService],
})
export class AppModule {}
event.service.ts
import { Injectable } from '#nestjs/common';
interface Event{}
#Injectable()
export class EventService {
create(event: Event) {
return {
id: Date.now()
}
}
}
event.controller.ts
import { Controller, Post, Body } from '#nestjs/common';
import { EventService } from './event.service';
interface Event { }
#Controller('event')
export class EventController {
constructor(private readonly eventService: EventService) { }
#Post()
async create(#Body() req)
{
this.eventService.create(req);
}
}
So this.eventService is always undefined. What is wrong with this implementation?
Maybe you are missing a line from tsconfig add this below:
"emitDecoratorMetadata": true
Credits to the God of Nestjs Mr. Kamil's reply:
https://stackoverflow.com/a/50121886/6301493