rxjs | A reactive programming library for JavaScript | Reactive Programming library

by ReactiveX TypeScript Version: 8.0.0-alpha.7 License: Apache-2.0

X-Ray Key Features Code Snippets Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | rxjs Summary

rxjs is a TypeScript library typically used in Programming Style, Reactive Programming, Angular applications. rxjs has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Curious what's next for RxJS? Follow along with Issue 6367.

Support

Quality

Security

License

Reuse

Support

Quality

Security

License

Reuse

Support

rxjs has a medium active ecosystem.

It has 28620 star(s) with 2926 fork(s). There are 455 watchers for this library.

It had no major release in the last 6 months.

There are 210 open issues and 2879 have been closed. On average issues are closed in 295 days. There are 52 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of rxjs is 8.0.0-alpha.7

rxjs Support

Best in #Reactive Programming

Average in #Reactive Programming

rxjs Support

Best in #Reactive Programming

Average in #Reactive Programming

Quality

rxjs has 0 bugs and 0 code smells.

rxjs Quality

Best in #Reactive Programming

Average in #Reactive Programming

rxjs Quality

Best in #Reactive Programming

Average in #Reactive Programming

Security

rxjs has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

rxjs code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

rxjs Security

Best in #Reactive Programming

Average in #Reactive Programming

rxjs Security

Best in #Reactive Programming

Average in #Reactive Programming

License

rxjs is licensed under the Apache-2.0 License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

rxjs License

Best in #Reactive Programming

Average in #Reactive Programming

rxjs License

Best in #Reactive Programming

Average in #Reactive Programming

Reuse

rxjs releases are not available. You will need to build from source code and install.

Installation instructions are not available. Examples and code snippets are available.

It has 4699 lines of code, 0 functions and 1078 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

rxjs Reuse

Best in #Reactive Programming

Average in #Reactive Programming

rxjs Reuse

Best in #Reactive Programming

Average in #Reactive Programming

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here

Get all kandi verified functions for this library.

rxjs Key Features

Smaller overall bundles sizes

Provide better performance than preceding versions of RxJS

To model/follow the Observable Spec Proposal to the observable

Provide more modular file structure in a variety of formats

Provide more debuggable call stacks than preceding versions of RxJS

rxjs Examples and Code Snippets

No Code Snippets are available at this moment for rxjs.

Community Discussions

Trending Discussions on rxjs

AngularFireModule and AngularFireDatabaseModule not being found in @angular/fire

throwError(error) is now deprecated, but there is no new Error(HttpErrorResponse)

How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular

Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"

Angular: How to route different modules on the same path depending on service

Error: Package path ./compat is not exported from package

Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: > Unexpected "$"

rxjs 7 update - Subject - Expected 1 arguments, but got 0

Chart JS +ng2-charts not working on Angular+2

internal/modules/cjs/loader.js:883 throw err

Trending Discussions on rxjs

AngularFireModule and AngularFireDatabaseModule not being found in @angular/fire

throwError(error) is now deprecated, but there is no new Error(HttpErrorResponse)

How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular

Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"

Angular: How to route different modules on the same path depending on service

Error: Package path ./compat is not exported from package

Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: > Unexpected "$"

rxjs 7 update - Subject - Expected 1 arguments, but got 0

Chart JS +ng2-charts not working on Angular+2

internal/modules/cjs/loader.js:883 throw err

QUESTION

AngularFireModule and AngularFireDatabaseModule not being found in @angular/fire

Asked 2022-Apr-01 at 12:56

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:20

AngularFire 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';

See the version 7 upgrade docs for more information.

Source https://stackoverflow.com/questions/68939014

QUESTION

throwError(error) is now deprecated, but there is no new Error(HttpErrorResponse)

Asked 2022-Mar-01 at 00:42

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 ?

http-error.interceptor.ts

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
      });
    }
  }
}

auth.interceptor.ts

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:08

Instead 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.

Source https://stackoverflow.com/questions/68655492

QUESTION

How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular

Asked 2022-Feb-11 at 07:31

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:47

You 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';

Source https://stackoverflow.com/questions/69128608

QUESTION

Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"

Asked 2022-Jan-04 at 13:18

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:34

From 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.

Source https://stackoverflow.com/questions/70141707

QUESTION

Angular: How to route different modules on the same path depending on service

Asked 2021-Dec-20 at 21:23

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:

app.module.ts

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 {}

ab.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class ABService {
  private aIsResponsible = true;

  constructor() {}

  switch() {
    this.aIsResponsible = !this.aIsResponsible;
  }

  isAResponsible() {
    return this.aIsResponsible;
  }
}

aorb-activate.guard.ts

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:50

You 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 {}

Source https://stackoverflow.com/questions/70394939

QUESTION

Error: Package path ./compat is not exported from package

Asked 2021-Dec-02 at 15:09

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:

Crashes

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,
  ) {

  }
  
}

Does not crash

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,
  ) {

  }
  
}

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",

See also

Github issue

ANSWER

Answered 2021-Dec-02 at 15:09

You need to change your import from:

import firebase from "firebase/compat";

import firebase from "firebase/compat/app";
//                                    ^^^

Getting started with Firebase Authentication

Source https://stackoverflow.com/questions/69054603

QUESTION

Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: > Unexpected "$"

Asked 2021-Nov-19 at 17:27

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:30

I 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.

Source https://stackoverflow.com/questions/69040951

QUESTION

rxjs 7 update - Subject - Expected 1 arguments, but got 0

Asked 2021-Nov-19 at 10:13

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.
}

Error stackblitz

ANSWER

Answered 2021-Jul-30 at 12:42

tl;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.

Source https://stackoverflow.com/questions/68590899

QUESTION

Chart JS +ng2-charts not working on Angular+2

Asked 2021-Jun-02 at 15:23

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:29

I 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".

Source https://stackoverflow.com/questions/66936633

QUESTION

internal/modules/cjs/loader.js:883 throw err

Asked 2021-May-28 at 05:55

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:55

the 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

Source https://stackoverflow.com/questions/65653417

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install rxjs

You can download it from GitHub.

Support

We appreciate all contributions to the documentation of any type. All of the information needed to get the docs app up and running locally as well as how to contribute can be found in the documentation directory.

Find more information at:

Reuse Trending Solutions