rxjs и loadash Предупреждения об оптимизации зависимостей CommonJS или AMD после обновления до Angular 10

Я обновил свое приложение с Angular 9 до Angular 10. Процесс обновления прошел успешно, и я могу запустить приложение. Но когда я запускаю команду ng serve, отображаются следующие предупреждения.

WARNING in src\app\auth\guard\auth.guard.ts depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in src\app\shared\services\api.service.ts depends on 'rxjs/Observable'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in src\app\auth\guard\auth.guard.ts depends on 'rxjs/observable/fromPromise'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in src\app\shared\services\localforage.service.ts depends on 'rxjs/observable/forkJoin'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in src\app\auth\guard\auth.guard.ts depends on 'rxjs/add/operator/map'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Есть обходной путь, который некоторым людям предлагается занести в белый список commonJS, но все же это приведет к увеличению размера пакета. Как я могу избавиться от этой распространенной проблемы с JS и при этом получить оптимизированный размер пакета?

PS: Окончательный код с оператором map

import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { switchMap, tap, map } from 'rxjs/operators';
import { Observable, from} from 'rxjs';

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

        return this.getToken().map((token: any) => {
            if ((token !==null) && !this.jwtHelper.isTokenExpired(token.data)) {
               // this.proactiveTokenRefresh(token);
                return true;
            } 
            
            // Store the attempted URL for redirecting
            this.localForage.setItem('redirectUrl', state.url).then(() => {
                // Navigate to the login page
                this.router.navigate(['/login']);
                return false;
            });
        });
}
    
private getToken(): Observable<{}> {
    const token = this.localForage.getItem('id_token');
    
    return from(token);
}`

typescript angular rxjs commonjs angular10
person Happy Coder    schedule 03.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Из предупреждений, ниже поможет

  • Пожалуйста, проверьте весь импорт из rxjs
import {Observable, fromPromise} from 'rxjs' 
import {map, forkJoin} from 'rxjs/operators'

Также обратите внимание на то, чтобы ваши операторы передавались по конвейеру, как показано ниже

import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

    import { switchMap, tap, map } from 'rxjs/operators';
    import { Observable, from} from 'rxjs';
    
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    
      return this.getToken().pipe(
        map((token: any) => {
          if ((token !==null) && !this.jwtHelper.isTokenExpired(token.data)) {
            // this.proactiveTokenRefresh(token);
            return true;
          } 
          // Store the attempted URL for redirecting
          this.localForage.setItem('redirectUrl', state.url).then(() => {
            // Navigate to the login page
            this.router.navigate(['/login']);
            return false;
          });
        });
      )
    }
        
    private getToken(): Observable<{}> {
        const token = this.localForage.getItem('id_token');
        
        return from(token);
    }
  • Для lodash попробуйте заменить функции lodash различными доступными функциями ES2015.
person Owen Kelvin    schedule 03.09.2020
comment
Отображается такая ошибка Module '"../../../../node_modules/rxjs/operators"' has no exported member 'fromPromise'.ts(2305) - person Happy Coder; 03.09.2020
comment
Извини, import fromPromise from rxjs - person Owen Kelvin; 03.09.2020
comment
Большую часть импорта я исправил. Но есть проблема с rxjs / add / operator / map. Его нет в операторах и все еще горит предупреждение - person Happy Coder; 09.09.2020
comment
Импортировать {map} из rxjs/operators не rxjs/add/operator/map - person Owen Kelvin; 09.09.2020
comment
когда я использую это, я получаю сообщение об ошибке Property 'map' does not exist on type 'Observable<{}>' при попытке использовать его - person Happy Coder; 09.09.2020
comment
Пожалуйста, поделитесь кодом, в котором используется оператор - person Owen Kelvin; 09.09.2020
comment
Я обновил вопрос и вставил код в конец. - person Happy Coder; 10.09.2020