升级到Angular 10后，rxjs和loadash CommonJS或AMD dependencies优化警告

我已将我的应用程序从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

有一个解决办法，一些人建议将CommonJ列入白名单，但这仍然会导致捆绑包大小的增加。我怎样才能摆脱这个常见的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);
}`

从'@angular/Router'导入{Router，CanActivate，ActivatedRouteSnapshot，routerstatesapshot}；
从“rxjs/operators”导入{switchMap，tap，map}；
从'rxjs'导入{observatable，from}；
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回此.getToken（）.map（（标记：any）=>{
if（（token！==null）&&！this.jwtHelper.isTokenExpired（token.data））{
//此.proactiveTokenRefresh（令牌）；
返回true；
} 
//存储尝试重定向的URL
this.localfough.setItem（'redirectUrl'，state.url）。然后（（）=>{
//导航到登录页面
this.router.navigate（['/login']）；
返回false；
});
});
}
private getToken（）：可观察{
const token=this.localfough.getItem（'id_token'）；
从（代币）返回；
}`

下面的警告将有所帮助

• 请检查从

  rxjs

还要注意，要像下面这样使用管道操作符

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

从'@angular/Router'导入{Router，CanActivate，ActivatedRouteSnapshot，routerstatesapshot}；
从“rxjs/operators”导入{switchMap，tap，map}；
从'rxjs'导入{observatable，from}；
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回此.getToken（）.pipe(
地图（（标记：任意）=>{
if（（token！==null）&&！this.jwtHelper.isTokenExpired（token.data））{
//此.proactiveTokenRefresh（令牌）；
返回true；
} 
//存储尝试重定向的URL
this.localfough.setItem（'redirectUrl'，state.url）。然后（（）=>{
//导航到登录页面
this.router.navigate（['/login']）；
返回false；
});
});
)
}
private getToken（）：可观察{
const token=this.localfough.getItem（'id_token'）；
从（代币）返回；
}

• 对于

  lodash

  ，尝试用各种ES2015可用功能替换lodash功能

---

它显示了这样一个错误，

Module'../../../../../../../node_modules/rxjs/operators“'没有导出成员'fromPromise'。ts（2305）

对不起，

从rxjs导入fromPromise

我修复的大部分导入。但是“rxjs/add/operator/map”有一个问题。运算符中不存在此项，但仍在警告从

rxjs/operators

导入{map}而不是

rxjs/add/operator/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().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);
    }