rxjs | A reactive programming library for JavaScript | Reactive Programming library
kandi X-RAY | rxjs Summary
Support
Quality
Security
License
Reuse
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
rxjs Key Features
rxjs Examples and Code Snippets
Trending Discussions on rxjs
Trending Discussions on rxjs
QUESTION
I am trying to implement Firebase Realtime Database into a angular project and Im getting stuck at one of the very first steps. Importing AngularFireModule and AngularFireDatabaseModule. It gives me the following error:
Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.
And here is how I am importing them:
import {AngularFireModule } from '@angular/fire';
import {AngularFireDatabaseModule} from '@angular/fire/database'
Am I missing something here? I have installed @angular/fire via the command
npm i firebase @angular/fire
and have also installed firebase tools. Here is a list of the Angular packages I currently have installed and their versions:
Angular CLI: 12.2.2
Node: 14.17.4
Package Manager: npm 6.14.14
OS: win32 x64
Angular: 12.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1202.2
@angular-devkit/build-angular 12.2.2
@angular-devkit/core 12.2.2
@angular-devkit/schematics 12.2.2
@angular/cli 12.2.2
@angular/fire 7.0.0
@schematics/angular 12.2.2
rxjs 6.6.7
typescript 4.3.5
I do apologise if this is all excessive information but I am completely stuck as to what the issue is. Any help would be GREATLY appreciated. Right now my suspicion is that its a compatibility issue or perhaps a feature that doesnt exist anymore on the latest versions but I really dont know.
ANSWER
Answered 2021-Aug-26 at 13:20AngularFire 7.0.0 was launched yesterday with a new API that has a lot of bundle size reduction benefits.
Instead of top level classes like AngularFireDatabase
, you can now import smaller independent functions.
import { list } from '@angular/fire/database';
The initialization process is a bit different too as it has a more flexible API for specifying configurations.
@NgModule({
imports: [
provideFirebaseApp(() => initializeApp(config)),
provideFirestore(() => {
const firestore = getFirestore();
connectEmulator(firestore, 'localhost', 8080);
enableIndexedDbPersistence(firestore);
return firestore;
}),
provideStorage(() => getStorage()),
],
})
If you want to proceed with the older API there's a compatibility layer.
import { AngularFireModule} from '@angular/fire/compat'
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
QUESTION
Apparently throwError(error)
is now deprecated. The IntelliSense of VS Code suggests throwError(() => new Error('error')
. new Error(...)
accepts only strings. What's the correct way to replace it without breaking my HttpErrorHandlerService
?
import { Injectable } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
HttpErrorResponse,
HttpResponse,
HttpHeaders
} from '@angular/common/http';
import { Observable, EMPTY, finalize, catchError, timeout, map, throwError } from 'rxjs';
import { HttpErrorHandlerService } from '@core/services';
@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
private readonly APP_XHR_TIMEOUT = 6000;
constructor(private errorHandlerService: HttpErrorHandlerService) {}
intercept(request: HttpRequest, next: HttpHandler): Observable> {
return next.handle(this.performRequest(request)).pipe(
timeout(this.APP_XHR_TIMEOUT),
map((event: HttpEvent) => this.handleSuccessfulResponse(event)),
catchError((error: HttpErrorResponse) => this.processRequestError(error, request, next)),
finalize(this.handleRequestCompleted.bind(this))
);
}
private performRequest(request: HttpRequest): HttpRequest {
let headers: HttpHeaders = request.headers;
//headers = headers.set('MyCustomHeaderKey', `MyCustomHeaderValue`);
return request.clone({ headers });
}
private handleSuccessfulResponse(event: HttpEvent): HttpEvent {
if (event instanceof HttpResponse) {
event = event.clone({ body: event.body.response });
}
return event;
}
private processRequestError(
error: HttpErrorResponse,
request: HttpRequest,
next: HttpHandler
): Observable> {
console.log('http error response');
if ([401].includes(error.status)) {
return throwError(error);
}
this.errorHandlerService.handle(error);
return throwError(error);
}
private handleRequestCompleted(): void {
// console.log(`Request finished`);
}
}
import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { MessageService } from 'primeng/api';
import { TimeoutError } from 'rxjs';
/**
* Shows a user-friendly error message when a HTTP request fails.
*/
@Injectable({
providedIn: 'root'
})
export class HttpErrorHandlerService {
constructor(private messageService: MessageService) {}
handle(error: Error | HttpErrorResponse) {
if (error instanceof TimeoutError) {
return this.openDialog('error', `Няма връзка до сървъра.`);
}
if (error instanceof HttpErrorResponse && error.error && error.error.message) {
return this.openDialog('error', error.error.message);
}
if (error instanceof Error) {
switch (error.message) {
default:
return this.openDialog('error', `An unknown error occurred`);
}
}
// Generic HTTP errors
switch (error.status) {
case 400:
switch (error.error) {
case 'invalid_username_or_password':
return this.openDialog('error', 'Невалидно потребителско име или парола');
default:
return this.openDialog('error', 'Bad request');
}
case 401:
return this.openDialog('error', 'Ще трябва да се логнете отново');
case 403:
return this.openDialog('error', `You don't have the required permissions`);
case 404:
return this.openDialog('error', 'Resource not found');
case 422:
return this.openDialog('error', 'Invalid data provided');
case 500:
case 501:
case 502:
case 503:
return this.openDialog('error', 'An internal server error occurred');
case -1:
return this.openDialog(
'error',
'You appear to be offline. Please check your internet connection and try again.'
);
case 0:
return this.openDialog('error', `CORS issue?`);
default:
return this.openDialog('error', `An unknown error occurred`);
}
}
private openDialog(severity: string, message: string) {
if (message?.trim()) {
this.messageService.add({
key: 'interceptor',
severity: severity,
summary: 'Информация',
detail: message,
life: 3000
});
}
}
}
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpErrorResponse
} from '@angular/common/http';
import {
BehaviorSubject,
catchError,
EMPTY,
filter,
finalize,
Observable,
switchMap,
take,
throwError
} from 'rxjs';
import { AuthService } from '@core/services';
import { AuthResponse } from '@core/types';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
private refreshTokenInProgress: boolean;
private refreshToken$ = new BehaviorSubject(null);
constructor(private authService: AuthService) {}
intercept(request: HttpRequest, next: HttpHandler): Observable> {
return next
.handle(this.performRequest(request))
.pipe(
catchError((error: HttpErrorResponse) => this.processRequestError(error, request, next))
);
}
private performRequest(request: HttpRequest): HttpRequest {
const accessToken = this.authService.getAccessToken();
let headers = request.headers;
if (accessToken) {
headers = headers.set('Authorization', `Bearer ${accessToken}`);
}
return request.clone({ headers });
}
private processRequestError(
error: HttpErrorResponse,
request: HttpRequest,
next: HttpHandler
): Observable> {
console.log('auth interceptor called');
if (
error instanceof HttpErrorResponse &&
error.status === 401 &&
this.authService.isSignedIn()
) {
return this.refreshToken(request, next);
}
return throwError(error);
}
private refreshToken(request: HttpRequest, next: HttpHandler): Observable> {
console.log('refresh token in auth.interceptor called');
// in case the page consists of more than one requests
if (!this.refreshTokenInProgress) {
this.refreshToken$.next(null);
this.refreshTokenInProgress = true;
return this.authService.refreshToken().pipe(
switchMap((response) => {
if (response) {
this.refreshToken$.next(response);
return next.handle(this.performRequest(request));
}
this.authService.signOut();
return throwError(() => new Error("RefreshTokenFailed"));
}),
catchError((error) => {
this.authService.signOut();
return throwError(error);
}),
finalize(() => (this.refreshTokenInProgress = false))
);
} else {
// wait while getting new token
return this.refreshToken$.pipe(
filter((result) => result !== null),
take(1),
switchMap(() => next.handle(this.performRequest(request)))
);
}
}
}
ANSWER
Answered 2021-Aug-04 at 19:08Instead of this:
catchError((error) => {
this.authService.signOut();
return throwError(error);
}),
You could try this:
catchError((error) => {
this.authService.signOut();
return throwError(() => error);
}),
I wasn't able to test it thoroughly, but a simple attempt seemed to work.
This was my simple test (using RxJS v7.2):
Service
getProducts(): Observable {
return this.http.get(this.productUrl)
.pipe(
tap(data => console.log('All: ', JSON.stringify(data))),
catchError(this.handleError)
);
}
private handleError(err: HttpErrorResponse): Observable {
// just a test ... more could would go here
return throwError(() => err);
}
Notice that err
here is of type HttpErrorResponse
.
Component
ngOnInit(): void {
this.sub = this.productService.getProducts().subscribe({
next: products => {
this.products = products;
this.filteredProducts = this.products;
},
error: err => this.errorMessage = err.message
});
}
Here I was able to retrieve the message
property from the error response and display it in my UI.
Let me know if this works for you.
QUESTION
I'm trying to connect my app with a firebase db, but I receive 4 error messages on app.module.ts:
'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
here is my package.json file:
{
"name": "gescable",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/architect": "^0.1202.5",
"@angular-devkit/architect-cli": "^0.1202.5",
"@angular/common": "~12.1.1",
"@angular/core": "~12.1.1",
"@angular/fire": "^7.0.4",
"@angular/forms": "~12.1.1",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"@ionic/angular": "^5.5.2",
"ajv": "^8.6.2",
"angularfire2": "^5.4.2",
"firebase": "^7.24.0",
"rxfire": "^6.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.1",
"@angular-eslint/builder": "~12.0.0",
"@angular-eslint/eslint-plugin": "~12.0.0",
"@angular-eslint/eslint-plugin-template": "~12.0.0",
"@angular-eslint/template-parser": "~12.0.0",
"@angular/cli": "~12.1.1",
"@angular/compiler": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@angular/language-service": "~12.0.1",
"@ionic/angular-toolkit": "^4.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.2.4",
"@angular-devkit/architect": "^0.1200.0",
"firebase-tools": "^9.0.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"open": "^7.0.3",
"jsonc-parser": "^3.0.0"
},
"description": "An Ionic project"
}
And here is my app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClientPageModule } from './client/client.module';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireDatabaseModule } from '@angular/fire/database';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
ClientPageModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFireStorageModule,
AngularFireDatabaseModule
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
Here is my tsonfig.ts file
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": ["es2018", "dom"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
"skipLibCheck": true
}
}
ANSWER
Answered 2021-Sep-10 at 12:47You need to add "compat" like this
import { AngularFireModule } from "@angular/fire/compat";
import { AngularFireAuthModule } from "@angular/fire/compat/auth";
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
QUESTION
When I try to run command ng lint --fix
cli throws this error:
An unhandled exception occurred: Cannot find builder "@angular-devkit/build-angular:tslint".
See "C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log" for further details.
My lint confing in angular.json
:
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/wepod-app/tsconfig.app.json",
"projects/wepod-app/tsconfig.spec.json",
"projects/wepod-app/e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
My package.json
:
{
"name": "wepod-clients",
"version": "3.2.3",
"scripts": {
"ng": "ng",
"start": "node patch.js && ng serve",
"build": "node patch.js && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production && ng run wepod-app:auth-standalone:production",
"server": "npm run build && http-server -p 9090 -c-1 dist",
"test": "ng test",
"lint": "ng lint --fix",
"e2e": "ng e2e",
"postinstall": "node patch.js && ngcc",
"postbuild": "node post-build.js",
"prepare": "husky install",
"build-latest": "git pull origin production && npm run build"
},
"private": true,
"dependencies": {
"@angular/animations": "^13.0.0",
"@angular/cdk": "^13.0.0",
"@angular/cli": "^13.0.1",
"@angular/common": "^13.0.0",
"@angular/compiler": "^13.0.0",
"@angular/core": "^13.0.0",
"@angular/forms": "^13.0.0",
"@angular/localize": "^13.0.0",
"@angular/platform-browser": "^13.0.0",
"@angular/platform-browser-dynamic": "^13.0.0",
"@angular/platform-server": "^13.0.0",
"@angular/router": "^13.0.0",
"@angular/service-worker": "^13.0.0",
"@types/video.js": "^7.3.27",
"animate.css": "^4.1.1",
"assert": "^2.0.0",
"bowser": "^2.11.0",
"buffer": "^6.0.3",
"bundle-loader": "^0.5.6",
"compare-version": "^0.1.2",
"constants-browserify": "^1.0.0",
"crypto-browserify": "^3.12.0",
"crypto-js": "^4.1.1",
"d3": "^6.5.0",
"hammerjs": "^2.0.8",
"https-browserify": "^1.0.0",
"jalali-moment": "^3.3.10",
"lottie-web": "^5.7.13",
"lzutf8": "^0.6.0",
"net": "^1.0.2",
"ng-gallery": "^5.1.1",
"ng2-jalali-date-picker": "^2.4.2",
"ngx-device-detector": "^1.5.2",
"ngx-doughnut-chart": "0.0.4",
"ngx-infinite-scroll": "^8.0.2",
"ngx-lottie": "^7.0.4",
"ngx-owl-carousel-o": "^3.1.1",
"ngx-skeleton-loader": "^2.10.1",
"ngx-toastr": "^12.1.0",
"os-browserify": "^0.3.0",
"podchat-browser": "^10.14.13",
"rxjs": "^6.6.7",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"tls": "0.0.1",
"tslib": "^2.0.0",
"uuid": "^8.3.2",
"video.js": "^7.15.4",
"videojs-record": "^4.5.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^13.0.1",
"@angular-devkit/core": "^13.0.1",
"@angular/compiler-cli": "^13.0.0",
"@angular/language-service": "^13.0.0",
"@egjs/hammerjs": "^2.0.17",
"@types/hammerjs": "^2.0.40",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^12.20.36",
"codelyzer": "^6.0.0",
"colors": "^1.4.0",
"git-tag-version": "^1.3.1",
"gulp": "^4.0.2",
"gulp-gzip": "^1.4.2",
"http-server": "^14.0.0",
"husky": "^7.0.4",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.7",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "^2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "^7.0.0",
"ts-node": "^8.10.2",
"tslint": "^6.1.3",
"typescript": "4.4.4",
"zip-dir": "^2.0.0"
},
"browser": {
"fs": false,
"path": false,
"os": false
}
}
ANSWER
Answered 2021-Nov-28 at 10:34From v13 angular doesn't use tslint
anymore due to deprecation.
Run ng add @angular-eslint/schematics
to add eslint
to your application.
It will use tslint-to-eslint-config to migrate you to eslint
automatically.
It will generate a .eslintrc.json
file and migrate tslint.json
to it.
Nothing else is needed to be done.
QUESTION
Imagine a service ABService
with a method isAResponsible: () => boolean
and two modules: AModule
and BModule
.
The question is: Is it possible to switch between AModule
and BModule
depending on what isAResponsible
returns? And how do we 'reroute' and rerender if the value of isAResponsible
changes? ABService
may have several dependencies to other services so it would be preferable to make use of the DI system somehow.
Example: If the route of interest is /aorb
and ABService.isAResponsible
returns true
, than we would like to route AModule
. If ABService.isAResponsible
returns false
however we want BModule
to manage further routing. Note that everything should happen on a shared route.
I tried it with guards and canActivate
/canLoad
but didn't succeed:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AorBActivateGuard } from './aorb-activate.guard';
import { ABService } from './ab.service';
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'aorb',
canActivate: [AorBActivateGuard],
loadChildren: () => import('./a/a.module').then((m) => m.AModule),
},
{
path: 'aorb',
loadChildren: () => import('./b/b.module').then((m) => m.BModule),
},
]),
],
providers: [AorBActivateGuard, ABService],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
import { Injectable } from '@angular/core';
@Injectable()
export class ABService {
private aIsResponsible = true;
constructor() {}
switch() {
this.aIsResponsible = !this.aIsResponsible;
}
isAResponsible() {
return this.aIsResponsible;
}
}
import { Injectable } from '@angular/core';
import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
} from '@angular/router';
import { Observable } from 'rxjs';
import { ABService } from './ab.service';
@Injectable()
export class AorBActivateGuard implements CanActivate {
constructor(private abService: ABService) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable | Promise | boolean {
return this.abService.isAResponsible();
}
}
ANSWER
Answered 2021-Dec-17 at 16:50You can you try this instead, I have just checked locally it works, just think it in a different way and you have your solution :)
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AorBActivateGuard } from './aorb-activate.guard';
import { ABService } from './ab.service';
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'aorb',
loadChildren: () => {
if ((new ABService()).isAResponsible()){
return import('./a/a.module').then((m) => m.AModule)
} else {
return import('./b/b.module').then((m) => m.BModule)
}
},
},
]),
],
providers: [AorBActivateGuard, ABService],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
QUESTION
Note: I think I was able to to reproduce this (see stackblitz example). The error there is printed in the console as "
INTERNAL ASSERTION FAILED: Expected a class definition
". This is different to what I get locally but to me this looks like the same issue.Anyway, just comment out line 15 in
app.component.ts
and the error will disappear.
I am trying to get started with Firebase but when I install & compile the Angular project I am getting the following error:
Module not found: Error: Package path ./compat is not exported from package /home/sfalk/workspaces/web-mobile/node_modules/firebase (see exports field in /home/sfalk/workspaces/web-mobile/node_modules/firebase/package.json)
The interesting thing is that I am only getting this error when I am injecting my AuthService
e.g. like this:
import {Component, OnInit} from '@angular/core';
import {FormBuilder} from '@angular/forms';
import {AuthService} from "../../../services/auth.service";
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
public loading = false;
constructor(
private formBuilder: FormBuilder,
public authService: AuthService,
) {
}
}
import {Component, OnInit} from '@angular/core';
import {FormBuilder} from '@angular/forms';
import {AuthService} from "../../../services/auth.service";
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
public loading = false;
constructor(
// private formBuilder: FormBuilder,
// public authService: AuthService,
) {
}
}
I am not sure if this class is causing the issue, I highly doubt it, but here is the code. Nothing special.
The only thing to mention maybe is that I am importing from @angular/fire/compat
which is as intended according to the docs.
import {Injectable} from "@angular/core";
import {Observable, of} from "rxjs";
import {Router} from "@angular/router";
import firebase from "firebase/compat";
import {switchMap} from "rxjs/operators";
import {AngularFireAuth} from "@angular/fire/compat/auth";
import {AngularFirestore, AngularFirestoreDocument} from "@angular/fire/compat/firestore";
import User = firebase.User;
import auth = firebase.auth;
@Injectable({providedIn: 'root'})
export class AuthService {
public user$: Observable;
constructor(
private afAuth: AngularFireAuth,
private afs: AngularFirestore,
private router: Router
) {
this.user$ = this.afAuth.authState.pipe(
switchMap(user => {
if (user) {
return this.afs.doc(`users/${user.uid}`).valueChanges();
}
return of(null);
})
) as Observable;
}
async googleSignIn() {
const provider = new auth.GoogleAuthProvider();
const credentials = await this.afAuth.signInWithPopup(provider);
return this.updateUserData(credentials.user);
}
async signOut() {
await this.afAuth.signOut();
return this.router.navigate(['/'])
}
// noinspection TypeScriptValidateTypes
private updateUserData(user: User | null) {
if (!user) {
throw "User is null."
}
const userRef: AngularFirestoreDocument = this.afs.doc(`users/${user.uid}`);
const data: any = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL
}
return userRef.set(data, {merge: true});
}
}
In my package.json
:
"@angular/fire": "^7.0.3",
"firebase": "^9.0.1",
- Github issue
ANSWER
Answered 2021-Dec-02 at 15:09You need to change your import from:
import firebase from "firebase/compat";
to
import firebase from "firebase/compat/app";
// ^^^
QUESTION
After migrating my angular 6 project to 12. I am getting multiple warning in terminal
if in angular.json i set optimisation: false configuration then all issue get resolved but i don't want to make this changes it should be true only.
with optimisation: true i am getting all these warnings:-
Earlier same code was working fine without any warning.
assets/.../variables.scss - Warning: Css Minimizer Plugin: > assets/.../variables.scss:6:0: warning: Unexpected "$"
6 │ $color-normal-gray:#8a8a8a;
╵ ^
assets/.../global.scss - Warning: Css Minimizer Plugin: >
assets/.../global.scss:285:2: warning: Expected identifier but found "."
285 │ .dropdown-menu{
╵ ^
assets/.../global.scss - Warning: Css Minimizer Plugin: >
assets/.../global.scss:255:6: warning: Expected identifier but found "*"
255 │ *background-color: #d9d9d9;
╵ ^
assets/.../master.scss - Warning: Css Minimizer Plugin: >
assets/.../master.scss:567:8: warning: Expected ":" but found "{"
567 │ circle {
╵ ^
My Package.json is below:
"dependencies": {
"@angular/animations": "^12.2.3",
"@angular/cdk": "^12.2.2",
"@angular/common": "^12.2.3",
"@angular/compiler": "^12.2.3",
"@angular/core": "^12.2.3",
"@angular/forms": "^12.2.3",
"@angular/http": "^7.2.16",
"@angular/material": "^12.2.3",
"@angular/platform-browser": "^12.2.3",
"@angular/platform-browser-dynamic": "^12.2.3",
"@angular/router": "^12.2.3",
"@fortawesome/fontawesome-free": "^5.15.4",
"@ngrx/store": "^6.1.0",
"@okta/okta-angular": "^3.0.1",
"@okta/okta-auth-js": "^4.7.1",
"angular-datatables": "^0.6.4",
"angular-image-slider": "0.0.8",
"autobind-decorator": "^2.4.0",
"bootstrap": "^4.6.0",
"core-js": "^2.5.4",
"file-saver": "^2.0.2",
"gulp-cli": "^2.3.0",
"json-bigint": "^1.0.0",
"jsrsasign": "^10.3.0",
"lodash": "4.17.10",
"ng-simple-slideshow": "^1.2.4",
"ng2-scroll-to-el": "^1.2.1",
"ng2-search-filter": "^0.4.7",
"ngx-filter-pipe": "^2.1.2",
"ngx-logger": "3.3.11",
"ngx-order-pipe": "^2.0.1",
"ngx-pagination": "^3.2.0",
"pagination": "file:src/app/packages/pagination-0.0.1.tgz",
"rxjs": "7.3.0",
"rxjs-compat": "^6.3.2",
"sass": "^1.36.0",
"single-spa": "^5.9.2",
"single-spa-angular": "^5.0.2",
"systemjs": "^6.8.3",
"true-case-path": "^1.0.3",
"tslint": "^6.0.0",
"xlsx": "^0.17.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^12.1.1",
"@angular-devkit/build-angular": "^12.2.2",
"@angular-eslint/builder": "12.3.1",
"@angular-eslint/eslint-plugin": "12.3.1",
"@angular-eslint/eslint-plugin-template": "12.3.1",
"@angular-eslint/schematics": "12.3.1",
"@angular-eslint/template-parser": "12.3.1",
"@angular/cli": "^12.2.2",
"@angular/compiler-cli": "^12.2.3",
"@angular/language-service": "^12.2.3",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"@types/bootstrap": "^4.1.2",
"@types/jasmine": "2.8.6",
"@types/jasminewd2": "2.0.3",
"@types/lodash": "4.14.110",
"@types/node": "14.6.2",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"await": "^0.2.6",
"cheerio": "^1.0.0-rc.2",
"codelyzer": "~4.2.1",
"eslint": "^7.26.0",
"font-awesome": "^4.7.0",
"fs-promise": "^2.0.3",
"gulp": "^4.0.2",
"gulp-inline-css": "^3.3.0",
"gulp-inline-source": "^4.0.0",
"htmlhint-ng2": "0.0.13",
"husky": "^1.3.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^6.3.4",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"mediaquery-text": "1.0.7",
"ng-bullet": "^1.0.3",
"protractor": "^5.4.2",
"puppeteer": "^1.14.0",
"sonar-scanner": "^3.1.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"tslint-sonarts": "^1.9.0",
"typescript": "^4.3.5"
}
ANSWER
Answered 2021-Sep-08 at 10:30I had the same problem. You should change the import of 'assets/.../variables.scss' to './assets/.../variables.scss'. In my case it was in styles.scss but it can be in every .scss file.
QUESTION
I updated rxjs from version 6.x.x to 7.x.x, but following error appeared:
Error in src/app/app.component.ts (12:19) Expected 1 arguments, but got 0.
when trying to next
an empty value to the Subject
destroy$ = new Subject();
constructor() {
this.destroy$.next(); // <-- Expected 1 arguments, but got 0.
}
ANSWER
Answered 2021-Jul-30 at 12:42tl;dr:
Either typecast it with void
:
new Subject();
or pass a fake value:
this.destroy$.next(true);
Rxjs 7 changes
After checking the changelog and several github issues about this situation,
Subject: resolve issue where Subject constructor errantly allowed an argument (#5476) (e1d35dc)
Subject: no default generic (e678e81)
Changelog 7.0.0-beta.1 and the commit where empty value is removed from the tests
I realized that the solution was to either provide a value or simply typecast the Subject
with as in
destroy$ = new Subject()
if you want to next
it with an empty value.
QUESTION
Hello developers i have been literally the whole day trying to implement charts on my proyect , but following the official docs there is not way i could rid off this error :
ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
"export 'pluginService' was not found in 'chart.js'
node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member
'ChartPoint'.
4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
~~~~~~~~~~
node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member
'PluginServiceGlobalRegistration'.
4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.
4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
32 chart: Chart;
~~~~~
node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
56 getChartBuilder(ctx: string): Chart;
~~~~~
src/app/components/graphics/graphics.component.ts:6:20 - error TS2305: Module '"../../../../node_modules/chart.js/types/index.esm"' has no exported member 'pluginService'.
6 import { ChartType,pluginService} from 'chart.js';
~~~~~~~~~~~~~
Date: 2021-04-03T22:59:36.844Z - Hash: 2c8378fd3f46cd7e10f8
6 unchanged chunks
Time: 2109ms
ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
"export 'pluginService' was not found in 'chart.js'
ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 324:8-21
"export 'pluginService' was not found in 'chart.js'
ERROR in node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:30 - error TS2724: Module '"../../chart.js/types/index.esm"' has no exported member 'ChartDataSets'. Did you mean 'ChartDataset'?
4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
~~~~~~~~~~~~~
node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member
'ChartPoint'.
4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
~~~~~~~~~~
node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member
'PluginServiceGlobalRegistration'.
4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'.
4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
32 chart: Chart;
~~~~~
node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
56 getChartBuilder(ctx: string): Chart;
~~~~~
All this when I'm trying to implement ng2-charts wrapping chart.js from its official site through the commands:
npm install --save ng2-charts
npm install --save chart.js
My package.json has this structure:
{
"name": "front",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.0.5",
"@angular/cdk": "^10.2.7",
"@angular/common": "~10.0.5",
"@angular/compiler": "~10.0.5",
"@angular/core": "~10.0.5",
"@angular/forms": "~10.0.5",
"@angular/material": "^10.2.7",
"@angular/platform-browser": "~10.0.5",
"@angular/platform-browser-dynamic": "~10.0.5",
"@angular/router": "~10.0.5",
"@mapbox/mapbox-gl-geocoder": "^4.7.0",
"@ngrx/effects": "^10.1.2",
"@ngrx/store": "^10.1.2",
"@ngrx/store-devtools": "^10.1.2",
"@swimlane/ngx-charts": "^17.0.1",
"@swimlane/ngx-datatable": "^19.0.0",
"angular-datatables": "^11.1.1",
"bootstrap": "^4.6.0",
"chart.js": "^3.0.1",
"chartjs-plugin-datalabels": "^0.7.0",
"datatables.net": "^1.10.20",
"datatables.net-dt": "^1.10.20",
"jquery": "^3.6.0",
"mapbox-gl": "^2.2.0",
"ng2-charts": "^2.4.2",
"popper.js": "^1.16.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"uuid": "^8.3.2",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.4",
"@angular/cli": "~10.0.4",
"@angular/compiler-cli": "~10.0.5",
"@types/datatables.net": "^1.10.18",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.3.33",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}
And the ChartModule is implemented in the app.module, as well as the modularized component I might be setting the charts at.
I'm not sure why this situation. Any help would be amazing. Thanks in advance
ANSWER
Answered 2021-Apr-04 at 07:29I too got the similar problem. I am not sure about the fix.I have resolved by downgrading the charts packages to "ng2-charts": "^2.3.0" and "chart.js": "^2.9.3".
QUESTION
I've ran into an issue running npm start
(I've attached the screenshot of the error bellow) on my Angular project.
When I run the project using ng serve
, everything is working fine.
I have tried several ways to fix this issue without success.
This is my package.json
file:
{
"name": "myapplication",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.0.6",
"@angular/common": "~11.0.6",
"@angular/compiler": "~11.0.6",
"@angular/core": "~11.0.6",
"@angular/forms": "~11.0.6",
"@angular/platform-browser": "~11.0.6",
"@angular/platform-browser-dynamic": "~11.0.6",
"@angular/router": "~11.0.6",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1100.6",
"@angular/cli": "~11.0.6",
"@angular/compiler-cli": "~11.0.6",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
ANSWER
Answered 2021-May-28 at 05:55the solution is:
Delete node_modules
and package-lock.json
, then run $ npm install
again.
You can also try updating your version of node.
Check version with $ node -v
, install with $ sudo n stable
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install rxjs
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page